默认情况下,日期选择器从下一个可用月份开始



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

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

请看一下这把小提琴:http://jsfiddle.net/amatoro/yFtLP/10/

它显示了八月的日历(从1日星期四开始,到31日星期六结束),但在顶部显示的是"9月"-9月。

我需要它从下一个可用的月历开始。在这种情况下是九月。但我不能用"defaultDate:(函数以九月开始)"来使它成为静态的。随着日期和月份的变化,所以如果我们在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;
};

我会不断尝试一些选项,但由于我缺乏知识,有时我会创建非常长的代码,而不是简单直接的代码。

提前感谢!

我找到了一种方法,但仍有一些小问题需要解决。这里基本上已经准备好了,但我仍然需要找到一种方法,使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]
 }

谢谢!

最新更新