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'
]
});
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.
Hi,
Nice plug in. How to achieve localization for month, day display.
Thank you
Hi,
How to achieve localization for month, day display.
Thank you
$.datetimepicker.setLocale(‘zh’);
$(‘#modifySemesterStartTime’).datetimepicker({
timepicker: true,
format: ‘Y-m-d h:i:s’,
theme: ‘dark’
});
excellent post, keep up the good work bro
Thank you
How we can change end date value should be greater then start date,if change start date 2020-01-30 15:00 then we can not keep end date 2020-01-30 14:00
Awesome work, love the pugin
Nice plugin
how can i also choose minutes also directly from the calander. for example 2020-12-03 1:00 i choose from calander but if i know the exact time with minutes like 2020-10-03 1:05 how can i do that instead of choosing 1:00 and then editing mnitues in text control