Disable Past date time in DateTimePicker jQuery plugin

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.

Read Also: How to Install 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.