Как отключить дату, основанную на текущем времени в Metro-UI

Question

Я работаю над проектом бронирования и использую Metro-UI Framework.

Я пытаюсь отключить сегодняшнюю дату для бронирования после 1 часа дня. Когда я использую data-min-date="2017-01-19" Я могу отключить предыдущие даты и сегодняшнюю дату, но, как я уже сказал, я хотел бы отключить его после 1 часа дня. Итак, можно ли использовать min-day со временем в Metro-UI Calendar?

Answer 1

Да, вам нужно будет добавить javascript в файл metro.js.

1:

Поиск: $.widget("metro.calendar", { в файле metro.js. Вы должны увидеть список опций - minDate, maxDate и т. Д.

В этом списке вы хотите добавить новый вариант - cutTime: false, - Потеряйте запятую, если она в конце!

2:

Искать следующую строку в файле:

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

Внутри это заявление, если вы должны увидеть следующее:

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

Весь блок должен читаться следующим образом: для (я = 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 - например, после 15:00 в субботу 21 июля.