Yet another awesome jQuery “Perfect Date Time Picker” plugin helps you to easily build a Datepicker with Timepicker without writing the code from start.
Furthermore, the plugin comes with a lot of options that allow you to easily customize it as per your need. You can also style the calendar widget by editing its CSS3 file.
It comes with more than 6 different calendar variation and you can pick anyone or even can use multiple calendars on the same page.
In addition, you can set the start & end date, language and data format (e.g YM | YMD | YMDHMS | HMS). Moreover, you can execute custom callback functions.
How to Use jQuery Datepicker with Timepicker
First of all, you need to load jQuery and JavaScript Calendar Library files into your webpage before closing the head tag.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Perfect-DateTimePicker CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>
<!-- Perfect-DateTimePicker JS -->
<script type="text/javascript" src="src/jquery.datetimepicker.js"></script>
Next, we need to create a simple div element with a unique ID “myDatePicker” in which the Javascript calendar will load dynamically.
<div id="myDatePicker"></div>
Finally, we need to initialize the plugin in the jQuery document ready function with all default settings.
$(document).ready(function(){
$('#myDatePicker').datetimepicker();
});
Advanced Options for Date & Time Picker
With the help of the following advanced options, you can easily configure or customize the date & time picker.
Option | Description, Default, Type |
---|---|
language | This option defines the language for the date picker. Default: ‘en’, Type: String. Possible Option: ‘zh’|’en’
$('#myDatePicker').datetimepicker({ language: 'en', }); |
viewMode | It defines the view model for date and time picker. Default: Type: String. Possible Option: ‘YM’|’YMD’|’YMDHMS’|’HMS’
$('#myDatePicker').datetimepicker({ viewMode: 'YM', }); |
firstDayOfWeek | The first day Of week (e.g 1 to 6 Sunday to Saturday). default: 0, Type: Number. Possible Value: 1 to 6 any number.
$('#myDatePicker').datetimepicker({ firstDayOfWeek: 3, }); |
onDateChange | Custom callback function to run on the date change. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({ onDateChange: function(){ // code to run } }); |
onClear | Custom callback function to run on the clear selected date. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({ onClear: function(){ // code to run } }); |
onOk | Callback function to run on ok button click event. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({ onOk: function(){ // code to run } }); |
onClose | Callback function to run on close button click event. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({ onClose: function(){ // code to run } }); |