Metro-UIの現在の時刻に基づいて日付を無効にする方法

Question

私は予約プロジェクトを行い、Metro-UI Frameworkを使用しています。

私は午後1時以降の予約のための今日の日付を無効にしようとしています。私が使用するとき data-min-date="2017-01-19"私は以前の日付と今日の日付を無効にすることができますが、私は午後1時にそれを無効にしたいと言った。ですから、Metro-UIカレンダーでmin-dayを時間とともに使用することは可能ですか？

Answer 1

はい、metro.jsファイルにjavascriptを追加する必要があります。

1：metro.jsファイルに$.widget("metro.calendar", { ：用

検索。

このリストには、新しいオプションを追加したい場合 - 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; 

文は今通過し、あなたが分時間があれば、それはそれ以外の場合は、真夜中にデフォルト設定されます、この時間からする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>"; 
      } 

次のようにブロック全体を読み取る必要があります。 （i = 1; I = < DAYSINMONTH; iは++）のため= 7 { WEEK_DAY％以下;

 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-時間あなたを追加することができます：

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

時間はHHにで行く：MM： SSので、非常に具体的に得ることができます！

それはそれを行う必要があります。 maxTimeも設定する場合は、7月21日土曜日の午後3時に同じ方法を使用することができます。