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

Leave A Reply

Your email address will not be published.