javascript - JQuery datetimepicker 异常日与 minDate 和 maxDate

Question

我遇到了日期时间选择器的问题。

我有一个包含订单的页面，其中有交货日期。

每当列出订单时，日期时间选择器都有一个特定的值(例如，上周的某一天。)我希望能够编辑它，但只选择一组可用日期(从今天到 30 天，包括“上周的某一天”)。 我应该如何进行？

选择器的功能:

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!

我想创建一个不在最小/最大日期范围内的异常(exception)日期。

Answer 1

对于显示的选项，我猜您正在使用 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') 会更容易与您所拥有的相同，但更易于阅读。

编辑

好的，所以您想要的是允许您的用户选择不在数组中的“特殊日子”，因此您可以使用 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,
});

工作 fiddle https://jsfiddle.net/William_/2ze7bo27/

编辑:更容易更改格式和特殊日期