jQuery Date and Time Picker with CSS3

Yet another awesome jQuery date and time picker with CSS3 stylish calendar widget. The plugin generates beautiful calendar in specific container (div/input) dynamically. So, users can easily pick both time and date from that calendar.

The plugin allow to set start & end date, language and date format (e.g YM | YMD | YMDHMS | HMS). Moreover, you can execute custom callback functions.

Plugin Overview

Plugin: Perfect Date Time Picker
Author: Jiandaoyun
Licence: MIT Licence
Published: June 27, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 66.3 KB

How to Use jQuery Date and Time Picker

1. First of all load jQuery and Perfect-DateTimePicker ‘s CSS and JavaScript file into your webpage.

<!-- 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>

2. In the next step, create a div element with a unique id in which your date and time picker will be loaded dynamically.

<div id="myDatePicker"></div>

3. Finally, initialize the plugin in jQuery document ready function with all default settings.

$(document).ready(function(){

   $('#myDatePicker').datetimepicker();

});

Advance Configuration Options for Date & Time Picker

The following are some advance configuration options to create / customize “perfect date & time picker”.

Option Description, Default, Type
language

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

$('#myDatePicker').datetimepicker({
   language: 'en',
});
viewMode

It define the view mode 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 date change. Default: null, Type: Function.

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

Custom callback function to run on 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
   }
});