Datepicker默认启动,下一个可用月份

时间:2013-08-30 19:44:11

标签: javascript jquery jquery-ui datepicker

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

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

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

它显示了8月的日历(从星期四1开始,到星期六31结束),但在顶部显示“sep” - 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;
};

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

提前致谢!

1 个答案:

答案 0 :(得分:0)

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

小提琴: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]
 }

谢谢!