jQuery Datepicker with Timepicker Plugin

Category: Date & Time | December 29, 2019
Author: jiandaoyun
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

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.

OptionDescription, Default, Type
language This option defines the language for the date picker. Default: ‘en’, Type: String.
Possible Option: ‘zh’|’en’

 

$('#myDatePicker').datetimepicker({
   language: 'en',
});
viewModeIt defines the view model for date and time picker. Default: Type: String.
Possible Option: ‘YM’|’YMD’|’YMDHMS’|’HMS’

 

$('#myDatePicker').datetimepicker({
   viewMode: 'YM',
});
firstDayOfWeekThe 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
   }
});
onCloseCallback function to run on close button click event. Default: null, Type: Function.

 

$('#myDatePicker').datetimepicker({
   onClose: function(){
      // code to run
   }
});