如何在 Metro-UI 中根据当前时间禁用日期
How to disable date based on the current time in Metro-UI
我正在做一个预订项目并使用 Metro-UI 框架。
我正在尝试禁用今天下午 1 点之后的预订。当我使用
data-min-date="2017-01-19"
我可以禁用之前的日期和今天的日期,但正如我所说,我想在下午 1 点之后禁用它。那么,是否可以在 Metro-UI 日历中使用带时间的最小日?
是的,您需要在 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>";
}
整个块应如下所示:
对于 (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”></div>
时间进入HH:MM:SS所以你可以很具体!
应该可以了。如果您也想设置 maxTime,您可以使用相同的方法 - 例如 7 月 21 日星期六下午 3 点之后。
我正在做一个预订项目并使用 Metro-UI 框架。
我正在尝试禁用今天下午 1 点之后的预订。当我使用
data-min-date="2017-01-19"
我可以禁用之前的日期和今天的日期,但正如我所说,我想在下午 1 点之后禁用它。那么,是否可以在 Metro-UI 日历中使用带时间的最小日?
是的,您需要在 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>";
}
整个块应如下所示: 对于 (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”></div>
时间进入HH:MM:SS所以你可以很具体!
应该可以了。如果您也想设置 maxTime,您可以使用相同的方法 - 例如 7 月 21 日星期六下午 3 点之后。