JavaScript Date Time Picker

This JavaScript code snippet helps you to create a date time picker. It performs a variety of tasks related to a web application. First, it initializes the Google Places library and sets autocomplete options for origin and destination inputs. Then, it sets the current date and populates the date field with it. Next, it adds a date and time picker using jQuery’s date picker and time picker plugins.

Finally, it defines a function to swap the values of the origin and destination inputs and adds a tooltip to a button using Bootstrap’s tooltip plugin.

How to Create JavaScript Date Time Picker

First of all, load the following assets into the head tag of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1" /><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/simplex/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css'>

Create the HTML structure for the date time picker as follows:

<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<div class="page-header"><h2>trip planner</h2></div>
				<div class="well">
					<form action="https://maps.google.com" method="get" name="trip_planner_form" target="_blank" id="trip_planner_form_id">
						<div class="form-group">
							<input type="text" class="form-control" name="saddr" id="startAddress" value="" size="60" placeholder="Origin Address" />
						</div>
						<div class="form-group input-group">
							<input type="text" class="form-control" name="daddr" id="endAddress" value="" size="60" placeholder="Destination Address" />
							<span class="input-group-btn"><button onclick="swapOD()" type="button" class="btn" data-toggle="tooltip" data-placement="right" title="Reverse "><span class="glyphicon glyphicon-sort" aria-hidden="true"></span></button></span>
						</div>
						
						<div class="form-group form-inline">
							<div class="form-group" style="padding-right: 10px;">
								<label class="radio-inline"><input type="radio" name="ttype" value="dep" checked>Depart at</label>
								<label class="radio-inline"><input type="radio" name="ttype" value="arr">Arrive by</label>
							</div>
							<div class="form-group"><input type="text" class="form-control" name="date" id="date" size="10" value="" placeholder="Date" /></div>
							<div class="form-group"><input type="text" class="form-control timepicker" name="time" id="time" size="10" value="" placeholder="Time" /></div>
						</div>
						<div class="form-group">
							<input type="hidden" name="sll" value="37.9715,-122.5228">
							<input type="hidden" name="dirflg" value="r" />
						</div>
						<div class="form-group">
							<button name="plan_trip" type="submit" id="plan_trip_id" value="Plan Trip" class="btn btn-primary">Plan Trip</button>
							<div class=""><small>Powered by <a href="https://transit.google.com" title="Google Transit" target="_blank">Google Transit</a></small></div>
						</div>
						
					</form>
				</div>
			</div>
		</div>
	</div>

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAa9ch-c7JD2uhSgvzVpDG40g-j5O8Cjs8&libraries=places'></script>

Finally, add the following JavaScript function for its functionality:

// Google Places Library
function initialize() {
	var defaultBounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(37.971297,-122.523168)
		);

	var origin_input = document.getElementById('startAddress');
	var destination_input = document.getElementById('endAddress');
	var options = {
		bounds: defaultBounds,
		componentRestrictions: {country: 'us'}
	};
	var autocomplete_origin = new google.maps.places.Autocomplete(origin_input, options); 
	var autocomplete_destination = new google.maps.places.Autocomplete(destination_input, options); 
}
google.maps.event.addDomListener(window, 'load', initialize);

// Set current date
var curDateTime = new Date();
var curYear = curDateTime.getFullYear();
var curMonth = curDateTime.getMonth() + 1;
var curDay = curDateTime.getDate();
var curDate = "";
curDate = ((curMonth < 10) ? "0" : "") + curMonth + "/" + curDay + "/" + curYear;
document.getElementById("date").value = curDate;

// Date and time picker
$(function () {
	$('#date').datepicker();
	$('input.timepicker').timepicker({
		timeFormat: 'h:mm p',
		interval: 30,
		minHour: 0,
		maxHour: 24,
		defaultTime: 'now',
		dropdown: true,
		dynamic: false,
	});
});

// Reverse origin and destination
function swapOD() {
	var priorStart = $("#startAddress").val();
	var priorEnd = $("#endAddress").val();
	$("#startAddress").val(priorEnd);
	$("#endAddress").val(priorStart);
}
$('[data-toggle="tooltip"]').tooltip(); // Add tooltip to button

That’s all! hopefully, you have successfully created the JavaScript date time picker. If you have any questions or suggestions, feel free to comment below.