如何根据Metro-UI中的当前时间禁用日期

Question

我正在处理预订项目并使用Metro-UI Framework。

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

Answer 1

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

1：

搜索：$.widget("metro.calendar", { 在metro.js文件。你应该看到一个选项列表 - 分钟日期，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语句现在会经过，如果你有一分钟​​的时间，将设定的minDate是从这个时候，否则将默认为午夜。

*请注意最后一行（ - 24 * 60 * 60 * 1000）？我们将日期的格式更改为ISO格式。

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>"; 
      } 

整个块应如下所示： 为（I = 1;我< = daysInMonth;我++）{ 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，现在你就可以给你加分，时间就像这样：

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

时间的推移，在HH：MM： SS，所以你可以得到很具体的！

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