How to disable date based on the current time in Metro-UI

I am working on a booking project and using Metro-UI Framework.

I am trying to disable todays date for booking after 1pm. When I use data-min-date="2017-01-19" I can disable the previous dates and today's date but as I said I would like to disable it after 1pm. So, Is it possible to use min-day with time in Metro-UI Calendar ?

Yes, you will need to add some javascript into the metro.js file though.

1:

Search for: $.widget("metro.calendar", { in the metro.js file. You should see a list of options - minDate, maxDate etc.

In this list you want to add a new option - cutTime: false, - Lose the comma if it's at the end!

2:

Search for the following line in the file:

if (o.minDate !== false && typeof o.minDate === 'string') {

Inside this IF statement you should see the following:

o.minDate = new Date(o.minDate + 'T00:00:00Z') - 24 * 60 * 60 * 1000;

Replace this line (inside the IF statement) with the following:

        // Declare variable
        var _time = '';

        // If a cutTime has been set take the passed in value
        if(o.cutTime !== false && typeof o.cutTime === 'string') {
            _time = 'T' + o.cutTime + 'Z';
        }
        // Otherwise set it to the default
        else {
            _time = 'T00:00:00Z';
        }
        o.minDate = new Date(o.minDate + _time) - 24 * 60 * 60 * 1000;

The updated if statement will now go through and if you have a min time it will set the minDate to be from this time, otherwise it will default to midnight.

*Notice that the last line (- 24 * 60 * 60 * 1000)? We change the format of the date to be an ISO format. We’ll need this again shortly.*

3.

Search for the following line:

d_html = "<a href='#'>" + i + "</a>";

This should be sitting in an Else statement. Replace this line with the following:

// If we specify a time && date it is today
            if(o.cutTime !== false && year === this._today.getFullYear() && month === this._today.getMonth() && this._today.getDate() === i){
                    // Create a new date
                    var curDate = new Date();
                    //Set current date as the same format as the minDate
                    curDate = curDate - 24 * 60 * 60 * 1000;
                    // Check that the current date has not surpassed the min date
                    if(curDate < o.minDate) {
                        // If it has, treat it like another day
                        td.removeClass("day");
                        div.addClass("other-day");
                        d_html = i;
                    }
                    else {
                        d_html = "<a href='#'>" + i + "</a>";
                    }
            }
            else {
                d_html = "<a href='#'>" + i + "</a>";
            }

The whole block should read as follows: for (i = 1; i <= daysInMonth; i++) { week_day %= 7;

        if (week_day === 0) {
            tr.appendTo(table);
            tr = $("<div/>").addClass('calendar-row');
        }

        td = $("<div/>").addClass("calendar-cell align-center day");
        div = $("<div/>").appendTo(td);

        if (o.minDate !== false && 
            (this._dateFromNumbers(year, month + 1, i) < o.minDate) ||
            o.maxDate !== false && 
            (this._dateFromNumbers(year, month + 1, i) > o.maxDate)) {
            td.removeClass("day");
            div.addClass("other-day");
            d_html = i;
        } else {
            // If we specify a time && date it is today
            if(o.cutTime !== false && year === this._today.getFullYear() && month === this._today.getMonth() && this._today.getDate() === i){
                    // Create a new date
                    var curDate = new Date();
                    //Set current date as the same format as the minDate
                    curDate = curDate - 24 * 60 * 60 * 1000;
                    // Check that the current date has not surpassed the min date
                    if(curDate > o.minDate) {
                        // If it has, treat it like another day
                        td.removeClass("day");
                        div.addClass("other-day");
                        d_html = i;
                    }
                    else {
                        d_html = "<a href='#'>" + i + "</a>";
                    }
            }
            else {
                d_html = "<a href='#'>" + i + "</a>";
            }

        }

        div.html(d_html);

Finally:

Go to your HTML and you will now be able to add you min-time like so:

<div id=“calendar” data-min-date=“27/01/2017” data-cut-time=“13:00:00”></div>

The time goes in in HH:MM:SS so you can get quite specific!

That should do it. You can use the same approach if you want to set a maxTime too - after 3pm on Saturday 21 July for example.