Add Date-Time Picker to Input Field using jQuery


If you are looking for a jQuery plugin to add date-time picker to input field, this article will help you lot for that. DateTimePicker jQuery plugin is very simple and easy to implement. Also, this plugin provides various options to customize your Date-Time Picker as per your project needs.

This tutorial shows the simplest way to add date time picker with minimal JavaScript code. Here two types of date-time picker would be demonstrated. One will be appearing on clicking the input field and another would be displayed inline.

Before using jQuery DateTimePicker, include the jQuery library.

<script src="jquery.min.js"></script> 

Now include the js and css files of DateTimePicker plugin. This js file should go after the <body> tag.

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/> <script src="jquery.datetimepicker.full.js"></script> 


<input type="text" id="datetimepicker"/> 

JavaScript Code

$('#datetimepicker').datetimepicker({     format:'Y-m-d H:i', }); 

Inline DateTimePicker:

$('#datetimepicker').datetimepicker({     format:'Y-m-d H:i',     inline:true }); 


Most commonly used customization options are provided below.

MinDate & MaxDate:

$('#datetimepicker3').datetimepicker({     format:'Y-m-d H:i',     minDate:'2016-04-05',     maxDate:'2016-04-28' }); 

For today use minDate:0.

MinTime & MaxTime:

$('#datetimepicker4').datetimepicker({     format:'Y-m-d H:i',     minTime:'09:00',     maxTime:'20:00' }); 

For today use minTime:0.

Step time:

$('#datetimepicker5').datetimepicker({     format:'Y-m-d H:i',     step:15 }); 

On Select Date:

$('#datetimepicker6').datetimepicker({     format:'Y-m-d H:i',     onSelectDate:function(current_time, $input){         var selectedDate = $input.val();         alert(selectedDate);     } }); 

On Select Time:

$('#datetimepicker7').datetimepicker({     format:'Y-m-d H:i',     onSelectTime:function(current_time, $input){         var selectedDate = $input.val();         alert(selectedDate);     } }); 

Related Articles

Comments 0