Question

我遇到了datetimepicker的问题。

我有一个订单页面，它有一个交货日期。

每当列出订单时，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

maxDate = 2017/10/30

（此时一切正常）

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

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

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,
 });

使用时刻方法.add()将在30天内添加maxDate for minDate如果你使用startOf('day')会更容易，就像你拥有的一样，但更容易阅读。

这是制作它的小提琴：https://jsfiddle.net/William_/2ze7bo27/

修改

Ok那么你想要的是允许你的用户选择一个不在数组中的“特殊日子”，所以你可以使用enabledDates选项。

您将在其中添加您的特殊日期和启用的天数范围，因此只允许选择这样的日期：

var maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view var startDate = moment().startOf('day').format('YYYY/MM/DD'); //First date being add that's current day var enabledDates = [ moment('2017/09/10', 'YYYY/MM/DD'), //this is our "special day" moment(startDate, 'YYYY/MM/DD') // we format our day to the format of picker ]; //Iterate and add 30 days, and only those will be able to be picked for (var i = 1; i <= 30; i++) { //Here we give the need it format let date = moment().add(i, 'day').format('YYYY/MM/DD'); enabledDates.push(moment(date, 'YYYY/MM/DD')); } console.log(enabledDates); //Show the enable dates, just to confirm //We init our picker with the 30 days and our special date //`minDate` and `maxDate` still there to give the style to the view var $p = jQuery.noConflict(); $p("#myDatepicker").datetimepicker({ format: 'YYYY/MM/DD', useCurrent: false, showClose: true, minDate: moment('2017/09/10', 'YYYY/MM/DD'), maxDate: maxDate, enabledDates: enabledDates, });

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

使用minDate和maxDate的JQuery datetimepicker异常日

1 个答案: