我正在开展预订项目并使用Metro-UI Framework。
我试图在下午1点后禁用今天的预约日期。我用的时候
data-min-date="2017-01-19"
我可以禁用之前的日期和今天的日期,但正如我所说,我希望在下午1点后禁用它。那么,是否可以在Metro-UI日历中使用最少日期和时间?
答案 0 :(得分: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语句,如果你有一个最小时间,它会将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&lt; = 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,您现在可以像这样添加最短时间:
<div id=“calendar” data-min-date=“27/01/2017” data-cut-time=“13:00:00”></div>
时间进入HH:MM:SS所以你可以非常具体!
应该这样做。如果你想设置一个maxTime,你可以使用相同的方法 - 例如7月21日星期六下午3点之后。