1

我正在做一个预订项目并使用 Metro-UI 框架。

我正在尝试禁用今天下午 1 点之后的预订日期。当我使用时， data-min-date="2017-01-19"我可以禁用以前的日期和今天的日期，但正如我所说，我想在下午 1 点之后禁用它。那么，是否可以在 Metro-UI 日历中使用 min-day 和 time ？

4

1 回答 1

1

是的，您需要在metro.js文件中添加一些 javascript。

1：

搜索： $.widget("metro.calendar", { 在 metro.js 文件中。您应该会看到一个选项列表 - minDate、maxDate 等。

在此列表中，您要添加一个新选项 - cutTime: false,- 如果逗号位于末尾，请省略逗号！

在此处输入图像描述

2：

在文件中搜索以下行：

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

在此 IF 语句中，您应该看到以下内容：

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

将此行（在 IF 语句内）替换为以下内容：

        // 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;

更新后的 if 语句现在将通过，如果您有一个 min 时间，它会将 minDate 设置为从这个时间开始，否则它将默认为午夜。

*注意最后一行 (- 24 * 60 * 60 * 1000)？我们将日期的格式更改为 ISO 格式。我们很快就会再次需要它。*

3.

搜索以下行：

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

这应该放在 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>";
            }

整个块应如下所示： 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);

最后：

转到您的 HTML，您现在可以像这样添加您的 min-time：

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

时间以 HH:MM:SS 表示，因此您可以非常具体！

那应该这样做。如果您也想设置 maxTime，也可以使用相同的方法 - 例如，在 7 月 21 日星期六下午 3 点之后。

于 2017-01-27T22:49:13.317 回答