Adding a DateTime Picker to your Forms

Whether you’re allowing users to schedule appointments, book a vacation, or schedule a rental online — using a DateTime picker improves the User Experience (UX) while also ensuring you have the precise date and time specified. This article provides you with all the tools you need to add a DateTime Picker to your forms.

Below is the HTML, JavaScript, and file includes needed to add a DateTime picker to your forms. Enjoy.

Step 1

Add the HTML below to your website

//Modify the Form Fields to suit the needs of your website.
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Schedule an Appointment</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control" name="fname" id="fname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" name="lname" id="lname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label class="control-label">Appointment Time</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>

Step 2

Add the JavaScript below to the webpage(s) your DateTime picker is on.

<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>

Step 3

Add the includes below to the webpage(s) your DateTime picker is on.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.