2

予約と日付の選択が可能なカレンダーがありますが、特定の平日、特定の月、場合によっては第 3 金曜日または第 2 火曜日を無効にする必要があります。だから私はこの関数と変数を持っています。しかし今、カレンダーは常に実際の月から始まることに気付きました。

実際の月が無効になっている場合、カレンダーはそれから始まります。この特別なケースでは、実際の月は 8 月ですが、カレンダーの上部にある月の選択 (ドロップダウン) オプションには、次の利用可能な月の名前が表示されます (利用できない月を削除するコードを追加したため)。落ちる。

このフィドルをご覧ください: http://jsfiddle.net/amatoro/yFtLP/10/

8 月のカレンダー (木曜日 1 日から始まり、土曜日 31 日で終わる) を示していますが、一番上には "sep" - 9 月と表示されます。

次の利用可能な月のカレンダーから開始する必要があります。この場合は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;
};

いくつかのオプションを試し続けますが、知識が不足しているため、単純で直接的なコードではなく、非常に長いコードを作成することがあります。

前もって感謝します！

4

1 に答える 1

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]
 }

ありがとう！

于 2013-09-03T18:25:52.563 に答える