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.

10 Comments
  1. Oliver Schade says

    Hi,

    nice function btw.

    But I have a the opposit of your problem with the future. :).
    If the user change the day to a past day, the time is selectable.
    So the user can select a disabled date via the time slot.

    Regards,
    Oliver

    1. Full Stack developer says

      Hello Oliver Schade,

      Thanks for your reply and highlights this point. I have fixed code now.

  2. Tejaswini says

    Hi,
    In one case your code is not working you disable dates which is less than current date but timepicker is enable.In that case if you click on disable date datetimepicker set date and time which is less than current datetime for ex(2018-12-20 19:00) this should not acceptable

    1. Vikas Kumar says

      Hello Tejaswini,

      I have fixed that issue.

  3. Kajal says

    Hii can u send me the code

    1. Kajal says

      I need the full code to implement in my diploma projects to show the current date and time for bookings

      1. Hairy Soup says

        Nah bruh

      2. Vikas Kumar says

        Please download code from this page https://www.thecodedeveloper.com/add-datetimepicker-jquery-plugin/

        Thanks

  4. Rechie says

    I copied your code yet but there was an error . The previous days was disabled but the previous years was removed.

    1. Vikas Kumar says

      Please download code from this page https://www.thecodedeveloper.com/add-datetimepicker-jquery-plugin/ and then try. Thanks

Leave A Reply

Your email address will not be published.