jQuery datetimepicker例外日與minDate和maxDate

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

凡maxDate將使用矩量法.add() 加入30天的minDate這是比較容易，如果你使用startOf('day')，這將是你有相同的，但更容易閱讀。

這裏提琴生產它：https://jsfiddle.net/William_/2ze7bo27/

編輯

行，所以你想要的是讓你的用戶選擇了「特殊的日子」，也就是不在數組中，這樣對於你可以使用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/