Disable Past date time in DateTimePicker jQuery plugin

Vikas Kumar — Sun, 08 Apr 2018 18:53:48 +0000

Nowadays i was working a project and in this project one of the task i am using DateTimePicker jQuery plugin to select date time. According the task requirement I don’t want to allow user to select any past date time, only user can select current or future date time. So Today in this article i will explain how to Disable Past date time with DateTimePicker jQuery plugin.

Disable Past date time in DateTimePicker jQuery plugin

First we try to disable Past Date with minDate: 0 option:

//minDate option Example
$('#datetimepicker5').datetimepicker({
	minDate:0, // disable past date
});

Output:

Now i try to disable Past Date and Time with minDate: 0 and minTime: 0 option:

//minDate and minTime option Example
$('#datetimepicker6').datetimepicker({
	minDate: 0,  // disable past date
	minTime: 0, // disable past time
});

Output:

In the above output i have found two issue:

Issue 1: If current time is 2:00 AM, then user can’t select current time to 2:00 AM.

Issue 2: If user select future date then some time disable, e.g if current time is 3:00 AM, user can’t select time to 3:00 AM, 2:00 AM, 1:00 AM. But i want if user select future date then every time should be visible to select.

so here minTime: 0 option did’t work for me.

I wrote below code to fix above issues, in this code if user select today date then pass current time with minTime option and for future date all time will be visible to select.

var checkPastTime = function(inputDateTime) {
    if (typeof(inputDateTime) != "undefined" && inputDateTime !== null) {
        var current = new Date();

        //check past year and month
        if (inputDateTime.getFullYear() < current.getFullYear()) {
            $('#datetimepicker7').datetimepicker('reset');
            alert("Sorry! Past date time not allow.");
        } else if ((inputDateTime.getFullYear() == current.getFullYear()) && (inputDateTime.getMonth() < current.getMonth())) {
            $('#datetimepicker7').datetimepicker('reset');
            alert("Sorry! Past date time not allow.");
        }

        // 'this' is jquery object datetimepicker
        // check input date equal to todate date
        if (inputDateTime.getDate() == current.getDate()) {
            if (inputDateTime.getHours() < current.getHours()) {
                $('#datetimepicker7').datetimepicker('reset');
            }
            this.setOptions({
                minTime: current.getHours() + ':00' //here pass current time hour
            });
        } else {
            this.setOptions({
                minTime: false
            });
        }
    }
};

var currentYear = new Date();
$('#datetimepicker7').datetimepicker({
	format:'Y-m-d H:i',
	minDate : 0,
	yearStart : currentYear.getFullYear(), // Start value for current Year selector
	onChangeDateTime:checkPastTime,
	onShow:checkPastTime
});

I can’t express how happy I am to see my code is working fine.

The post Disable Past date time in DateTimePicker jQuery plugin appeared first on The Code Developer.

Add a DateTimePicker jQuery plugin to Input Field

Vikas Kumar — Wed, 04 Apr 2018 05:53:56 +0000

This Article shows the simplest way to add date time picker functionality to your websites to provide better end user experience. Here we are using DateTimePicker jQuery plugin to add date-time picker to input field, this article will help you lot for that. This plugin is very simple and easy to implement and provides various options to customize your Date Time Picker as per your project requirement.

Live Demo

Setting up DateTimePicker jQuery plugin

First include the jQuery library file before the closing tag.

Now include the js and css files of DateTime Picker jQuery plugin. those files should be add after the tag.

HTML Code

JavaScript Code with DatePicker Example

Output:

TimePicker Example

//TimePicke Example
$('#datetimepicker1').datetimepicker();

Output:

Inline DateTimePicker Example

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

Output:

minDate and maxDate Example

//minDate and maxDate Example
$('#datetimepicker3').datetimepicker({
     format:'Y-m-d',
     timepicker:false,
     minDate:'-1970/01/02', //yesterday is minimum date
     maxDate:'+1970/01/02' //tomorrow is maximum date
});

Output:

allow particular Times options with TimePicker Example

//allow particular Times options with TimePicker Example
$('#datetimepicker4').datetimepicker({
	datepicker:false,
	allowTimes:[
	  '11:00', '13:00', '15:00', 
	  '16:00', '18:00', '19:00', '20:00'
	]
});

Download Code File

The post Add a DateTimePicker jQuery plugin to Input Field appeared first on The Code Developer.

DateTimePicker Archives - The Code Developer

Disable Past date time in DateTimePicker jQuery plugin