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
The post Add a DateTimePicker jQuery plugin to Input Field appeared first on The Code Developer.