Adding Date-Time Picker to Input Field using jQuery


adding-date-time-picker-to-input-field-using-jquery-by-codexworld

If you are looking for a jQuery plugin to add date-time picker to input field, this article will help you lot for that. DateTimePicker jQuery plugin is very simple and easy to implement. Also, this plugin provides various options to customize your Date-Time Picker as per your project needs.

This tutorial shows the simplest way to add date time picker with minimal JavaScript code. Here two types of date-time picker would be demonstrated. One will be appearing on clicking the input field and another would be displayed inline.

Before using jQuery DateTimePicker, include the jQuery library.

<script src="jquery.min.js"></script>

Now include the js and css files of DateTimePicker plugin. This js file should go after the <body> tag.

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<script src="jquery.datetimepicker.full.js"></script>

HTML Code

<input type="text" id="datetimepicker"/>

JavaScript Code

$('#datetimepicker').datetimepicker({
    format:'Y-m-d H:i',
});

Inline DateTimePicker:

$('#datetimepicker').datetimepicker({
    format:'Y-m-d H:i',
    inline:true
});

Options

Most commonly used customization options are provided below.

MinDate & MaxDate:

$('#datetimepicker3').datetimepicker({
    format:'Y-m-d H:i',
    minDate:'2016-04-05',
    maxDate:'2016-04-28'
});

For today use minDate:0.

MinTime & MaxTime:

$('#datetimepicker4').datetimepicker({
    format:'Y-m-d H:i',
    minTime:'09:00',
    maxTime:'20:00'
});

For today use minTime:0.

Step time:

$('#datetimepicker5').datetimepicker({
    format:'Y-m-d H:i',
    step:15
});

On Select Date:

$('#datetimepicker6').datetimepicker({
    format:'Y-m-d H:i',
    onSelectDate:function(current_time, $input){
        var selectedDate = $input.val();
        alert(selectedDate);
    }
});

On Select Time:

$('#datetimepicker7').datetimepicker({
    format:'Y-m-d H:i',
    onSelectTime:function(current_time, $input){
        var selectedDate = $input.val();
        alert(selectedDate);
    }
});

Conclusion

The main purpose of this tutorial is to provide the instant way to add date-time picker to input form field. You can see the full options lists from the plugin page.

Leave a reply

Connect With CodexWorld