带有 minDate 和 maxDate 的 JQuery datetimepicker 异常日期

Posted 2023-05-08

【中文标题】带有 minDate 和 maxDate 的 JQuery datetimepicker 异常日期

【英文标题】：JQuery datetimepicker exception day with minDate and maxDate

【发布时间】：2018-03-29 00:04:27

【问题描述】：

我遇到了 datetimepicker 的问题。

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

每当列出订单时，日期时间选择器都有一个特定的值（例如，上周的某一天。）我希望能够对其进行编辑，但只选择一组可用日期（从今天到 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,
 );

编辑：

我猜我的问题不是很明确。

我想要的示例：

minDate = 2017/10/14

最大日期 = 2017/10/30

（此时一切正常）

我想选择的日期选项 = 2017/09/10（比 minDate 大 1 个月）而不更改 minDate！

我想创建一个不在最小/最大日期范围内的例外日期。

【参考方案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 将使用矩方法 .add() 添加 30 天 对于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,
);

工作小提琴https://jsfiddle.net/William_/2ze7bo27/

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

【讨论】：

我的 maxDate 代码工作正常，这不是重点。问题是：我有一个间隔（最小/最大），我想再添加一个不在该间隔内的日期。

这个问题上看的不是很清楚，但是让我澄清一下，你想让用户仍然检查用户仍然选择上周的同一天吗（原来选择的日子）？