A jQuery plugin for Date and Time Picker

1. Introduction

Perfect-DateTimePicker is a jQuery date and time picker with a Bootstrap look. The plugin creates a calendar in a container given as an initializing parameter. Perfect-DateTimePicker comes with many customization options: you can change language, date format (YM | YMD | HMS), start and end date and many more.

2. Plugin Overview

Demo

3. How to install and use Perfect-DateTimePicker jQuery plugin

Follow below steps in order to install and use Perfect-DateTimePicker plugin.

1. add jQuery library and Perfect-DateTimePicker CSS and JavaScript files

<!-- 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. next, create a div element that Perfect-DateTimePicker will take and build date/time picker on top of it

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

3. initialize Perfect-DateTimePicker plugin with that id selector in jQuery document ready function

$(document).ready(function(){

    var picker = $('#myDatePicker').datetimepicker({
        date: new Date(),
        viewMode: 'YMDHMS',
        firstDayOfWeek: 0,
        onDateChange: function() {
            $('#date-text').text(this.getText());
        },
        onClose: function() {
            this.element.remove();
        }
    });
    console.log(picker.getText());
    console.log(picker.getValue());

    picker.element.hide();
});

Initialization of Perfect-DateTimePicker will dynamically print calendar according to the given parameters in specified container.

4. Conclusion

In this article, we presented a jQuery plugin Perfect-DateTimePicker that can be used in web forms to pick a data and/or time. With many customization options you can attach this plugin to your application easily.