javascript - 日期选择器默认从下一个可用月份开始

Question

我有一个允许预订和选择日期的日历，但我需要禁用特定的工作日、特定的月份，在某些情况下，第三个星期五或第二个星期二。所以我有这个函数和变量。但现在我意识到日历总是从实际月份开始。

在实际月份被禁用的情况下，日历从它开始。在这种特殊情况下，实际月份是八月，但在日历的顶部，选择月份(下拉)选项显示下一个可用月份的名称(因为我添加了一个代码以使其从下拉菜单。

请看一下这个 fiddle :http://jsfiddle.net/amatoro/yFtLP/10/

它显示了 8 月的日历(从第 1 号星期四开始，到第 31 号星期六结束)，但顶部显示的是“sep” - 9 月。

我需要它从下一个可用的月历开始。在这种情况下，九月。但是我不能用“defaultDate:(从 9 月开始的函数)”使它成为静态的。随着日期和月份的变化，如果我们是在 12 月，如果从 9 月开始，日历就会出错(我知道澄清这件事真的很愚蠢，但以防万一)。

jQuery("#datepicker").datepicker({
    showOn: "button",
    dateFormat : 'yy/mm/dd',
    buttonText: "Select",
    beforeShowDay: disableSpecificWeekDaysandMonths,
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    stepMonths: 0,
    maxDate: '2y'
}).focus(function() {
    $(".ui-datepicker-prev, .ui-datepicker-next").remove();
    $.each(
        monthsToDisable,
        function( intIndex, objValue ){     
            $(".ui-datepicker-month > option[value='" + objValue + "']").remove();
        }
     );
});

var daysToDisable = [0, 1, 2, 3, 4, 6]; 
var monthsToDisable = [4,5,6,7]; 
var specificDaysToDisable = [5]; 
var weektoEnable = [3];

function disableSpecificWeekDaysandMonths(date) {

    var day = date.getDay();
    if ($.inArray(day, daysToDisable) != -1) {
        return [false];
    }

    var month = date.getMonth();
    if ($.inArray(month, monthsToDisable) != -1) {
        return [false];
    }

    var date2 = date.getDate();
    if ($.inArray(day, specificDaysToEnable) != -1 && date.getWeekOfMonth()!= weektoEnable) {
        return [false];
    }
    return [true]
}

Date.prototype.getWeekOfMonth = function(exact) {
    var month = this.getMonth()
        , year = this.getFullYear()
        , firstWeekday = new Date(year, month, 1).getDay()
        , lastDateOfMonth = new Date(year, month + 1, 0).getDate()
        , offsetDate = this.getDate() + firstWeekday - 1
        , index = 1 // start index at 0 or 1, your choice
        , weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7)
        , week = index + Math.floor(offsetDate / 7)
    ;
    if (exact || week < 2 + index) return week;
    return week === weeksInMonth ? index + (weeksInMonth -1 ) : week;
};

我会继续尝试一些选项，但有时我会创建非常长的代码而不是简单直接的代码，因为我缺乏知识。

提前致谢!

Answer 1

我找到了一种方法，但仍有一些小问题需要解决。这里基本上准备好了，但我仍然需要找到一种方法来使 defaultAvailableDate 函数中的“9(下一个可用月份)”动态而不是静态。我的意思是，创建一个函数来补充 defaultAvailableDate 以使其计算下一个可用月份。也许有人可以帮助指导我:

fiddle :http://jsfiddle.net/amatoro/9tSJh/6/

下面的代码按预期工作，但由于“下个月”是静态的，我将无法在所有行程中使用它:

 Date.prototype.getWeekOfMonth = function(exact) {
     var month = this.getMonth()
         , year = this.getFullYear()
         , firstWeekday = new Date(year, month, 1).getDay()
         , lastDateOfMonth = new Date(year, month + 1, 0).getDate()
         , offsetDate = this.getDate() + firstWeekday - 1
         , index = 1 // start index at 0 or 1, your choice
         , weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7)
         , week = index + Math.floor(offsetDate / 7)
     ;
     if (exact || week < 2 + index) return week;
     return week === weeksInMonth ? index + (weeksInMonth -1 ) : week;
 };

 jQuery("#datepicker").datepicker({
     showOn: "button",
     dateFormat : 'yy/mm/dd',
     buttonText: "Select",
     beforeShowDay: disableSpecificWeekDaysandMonths,
     changeMonth: true,
     changeYear: true,
     minDate: 0,
     stepMonths: 0,
     maxDate: '2y',
     defaultDate: defaultAvailableDate(),
 }).focus(function() {
     $(".ui-datepicker-prev, .ui-datepicker-next").remove();
     $.each(
         monthsToDisable,
         function( intIndex, objValue ){     
             $(".ui-datepicker-month > option[value='" + objValue + "']").remove();
         }
      );
 });

 var daysToDisable = [0, 1, 2, 3, 4, 6]; 
 var monthsToDisable = [5,6,7,8]; 
 var specificDaysToEnable = [5]; 
 var weektoEnable = [3];


 function defaultAvailableDate( ) { 
     var d = new Date();
     var n = d.getMonth(); 
     var monthsToDisable = [5,6,7,8]; 

     if( $.inArray(n, monthsToDisable) != -1){

       var offset = (n < 9) ? 0 : null;
       var availableMonth = 9 + offset - n;
       return '+' + availableMonth+ 'm';   

     } else {
          return '';   
     }

 }

 function disableSpecificWeekDaysandMonths(date) {

     var day = date.getDay();
     if ($.inArray(day, daysToDisable) != -1) {
         return [false];
     }

     var month = date.getMonth();
     if ($.inArray(month, monthsToDisable) != -1) {
         return [false];
     }

     var date2 = date.getDate();
     var inArray = $.inArray(day, specificDaysToEnable);
     if (inArray != -1 && date.getWeekOfMonth()!= weektoEnable) {
         return [false];
     }
     return [true]
 }

谢谢!