Add a DateTimePicker jQuery plugin to Input Field

This Article shows the simplest way to add date time picker functionality to your websites to provide better end user experience. Here we are using DateTimePicker jQuery plugin to add date-time picker to input field, this article will help you lot for that. This plugin is very simple and easy to implement and provides various options to customize your Date Time Picker as per your project requirement.

Live Demo

Setting up DateTimePicker jQuery plugin

First include the jQuery library file before the closing </head> tag.

<!-- this file should add inside the <head></head> tag -->
<script src="js/jquery.min.js"></script>

Now include the js and css files of DateTime Picker jQuery plugin. those files should be add after the </body> tag.

<!-- those files should be add after the </body> tag -->
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css"/>
<script src="js/jquery.datetimepicker.js"></script>

HTML Code

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

JavaScript Code with DatePicker Example

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker').datetimepicker();
    });
</script>

Output:

TimePicker Example

//TimePicke Example
$('#datetimepicker1').datetimepicker();

Output:

Inline DateTimePicker Example

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

Output:

minDate and maxDate Example

//minDate and maxDate Example
$('#datetimepicker3').datetimepicker({
     format:'Y-m-d',
     timepicker:false,
     minDate:'-1970/01/02', //yesterday is minimum date
     maxDate:'+1970/01/02' //tomorrow is maximum date
});

Output:

allow particular Times options with TimePicker Example

//allow particular Times options with TimePicker Example
$('#datetimepicker4').datetimepicker({
	datepicker:false,
	allowTimes:[
	  '11:00', '13:00', '15:00', 
	  '16:00', '18:00', '19:00', '20:00'
	]
});

Download Code File

3 Comments
  1. taoufiq says

    nice plugin, but we need a documentation to know how using variables, like hide the datetimepicker after selecting a date, how ton make a min date and max….
    i ‘am a web developper and i need this plugin.
    thank you.

  2. Arun Km says

    Hi,
    Nice plug in. How to achieve localization for month, day display.
    Thank you

  3. Arun Km says

    Hi,
    How to achieve localization for month, day display.
    Thank you

Leave A Reply

Your email address will not be published.