JQuery datetimepicker 异常日期与 minDate 和 maxDate
JQuery datetimepicker exception day with minDate and maxDate
我遇到了日期时间选择器的问题。
我有一个包含订单的页面,其中有交货日期。
每当列出订单时,日期时间选择器都有特定的值(例如,上周的某天。)我希望能够对其进行编辑,但只有 select 一组可用日期(从今天开始)最多 30 天,包括 "some day last week")。
我该如何进行?
选择器的功能:
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent:true,
showClose:true,
defaultDate: $.now(),
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
maxDate:maxdate,
});
编辑:
我猜我的问题不是很明确。
我想要的示例:
最小日期 = 2017/10/14
最大日期 = 2017/10/30
(此时一切正常)
我要选择的日期选项 = 2017/09/10(比 minDate 早 1 个月)而不更改 minDate!
我想创建一个不在 min/max 日期范围内的例外日期。
对于显示的选项,我猜你正在使用 eonasdan-datetimepicker。
所以这样进行:
var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: true,
showClose: true,
defaultDate: $p.now(),
minDate: moment().startOf('day'),
maxDate: maxDate,
});
其中 maxDate
将使用矩量法添加 30 天 .add()
对于 minDate
如果您使用 startOf('day')
会更容易,因为您使用的是相同的,但更容易阅读。
编辑
好的,所以您想要的是让您的用户选择一个不在数组中的 "special day",因此您可以使用 enabledDates
选项。
您将在其中添加您的特殊日子和启用的日期范围,因此只有这样才能被选中,就像这样:
let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
moment(specialDay, currentFormat), //this is our "special day"
moment(startDate, currentFormat) // we format the date to the format needed ];
//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
//apply the format
let date = moment().add(i, 'day').format(currentFormat);
enabledDates.push(moment(date, currentFormat));
}
//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view
$("#myDatepicker").datetimepicker({
format: currentFormat,
useCurrent: false,
showClose: true,
minDate: moment(specialDay, currentFormat),
maxDate: maxDate,
enabledDates: enabledDates,
});
工作fiddlehttps://jsfiddle.net/William_/2ze7bo27/
编辑:更容易更改格式和特殊日期
我遇到了日期时间选择器的问题。
我有一个包含订单的页面,其中有交货日期。
每当列出订单时,日期时间选择器都有特定的值(例如,上周的某天。)我希望能够对其进行编辑,但只有 select 一组可用日期(从今天开始)最多 30 天,包括 "some day last week")。 我该如何进行?
选择器的功能:
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent:true,
showClose:true,
defaultDate: $.now(),
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
maxDate:maxdate,
});
编辑:
我猜我的问题不是很明确。
我想要的示例:
最小日期 = 2017/10/14
最大日期 = 2017/10/30
(此时一切正常)
我要选择的日期选项 = 2017/09/10(比 minDate 早 1 个月)而不更改 minDate!
我想创建一个不在 min/max 日期范围内的例外日期。
对于显示的选项,我猜你正在使用 eonasdan-datetimepicker。
所以这样进行:
var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: true,
showClose: true,
defaultDate: $p.now(),
minDate: moment().startOf('day'),
maxDate: maxDate,
});
其中 maxDate
将使用矩量法添加 30 天 .add()
对于 minDate
如果您使用 startOf('day')
会更容易,因为您使用的是相同的,但更容易阅读。
编辑
好的,所以您想要的是让您的用户选择一个不在数组中的 "special day",因此您可以使用 enabledDates
选项。
您将在其中添加您的特殊日子和启用的日期范围,因此只有这样才能被选中,就像这样:
let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
moment(specialDay, currentFormat), //this is our "special day"
moment(startDate, currentFormat) // we format the date to the format needed ];
//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
//apply the format
let date = moment().add(i, 'day').format(currentFormat);
enabledDates.push(moment(date, currentFormat));
}
//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view
$("#myDatepicker").datetimepicker({
format: currentFormat,
useCurrent: false,
showClose: true,
minDate: moment(specialDay, currentFormat),
maxDate: maxDate,
enabledDates: enabledDates,
});
工作fiddlehttps://jsfiddle.net/William_/2ze7bo27/
编辑:更容易更改格式和特殊日期