jQuery Datepicker with Timepicker Plugin

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.

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

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

$('#myDatePicker').datetimepicker({
   firstDayOfWeek: 3,
});

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

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

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

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