2016-12-27 157 views
0

我有一個日期選擇器分配給幾個字段,並在我的beforeShowDay屬性中禁用了特定日期的數組。JQuery UI日期選擇器禁止選擇的月份

.datepicker({ beforeShowDay: disablePaymentDates, minDate: 0, maxDate: afterSixMonths }); 

我試圖禁用用戶在所有日期選擇器中選擇日期的月份。無論如何要做到這一點?

+0

什麼是 「disablePaymentDates」 日期範圍?數組 ?它應該是一個以date爲參數的函數。 http://api.jqueryui.com/datepicker/#option-beforeShowDay – roetnig

+0

它是一個以mm/dd格式保存日期的數組。 – Tyharo

回答

0

我想出了一個類似於Roetnig's的解決方案。我將下面的代碼添加到beforeShowDay屬性調用的函數中。

var monthsToDisable= []; 
if ($.inArray(date.getMonth(date), monthsToDisable) > -1) { 
    $return = false; 
    $returnclass = "unavailable"; 
} 

然後,我用相應的月份(0-11)填充'monthsToDisable'。由於此數組將根據用戶操作進行更新,因此我只需在更新數組後重新應用datepicker即可。

1

如所指示的datepicker API

beforeShowDay

類型:Function(日期日期)

默認:空

採用一個日期作爲參數的函數而絕返回數組:

[0]:指示是否可以選擇此日期的真/假[1]:要添加到日期單元格的CSS類名稱或默認演示文稿的「」[2]:此日期的可選彈出工具提示

該函數在日期選擇器中顯示前每天都會調用。

.datepicker({ 
    minDate: 0, 
    maxDate: afterSixMonths, 
    beforeShowDay: function(date) { 
     var dd = date.getDate(); 
     if ($.inArray(dd, disablePaymentDates)!= -1) { 
      return [false, "", "disabled" ]; 
     } else { 
      return [true, "", "enabled" ]; 
     } 
    } 
}); 
+0

因此,爲了禁用選擇日期的月份,我必須重新應用日期選取器到所有元素? – Tyharo

+1

你可以在函數內添加任何你想要的內容......禁用某周的某些日子,當前月份,無論如何。您在函數中收到日期,檢查有效性並返回三個值。這只是一個使用的例子。 – roetnig

0

或者,您可以禁用使用moment.js

var disableRangeStartDate = '2017-10-29'; 
var disableRangeEndDate = '2018-04-18'; 

.datepicker({ 
isInvalidDate: function(arg){ 
     var thisMonth = arg._d.getMonth()+1; 
     if (thisMonth<10){thisMonth = "0"+thisMonth;} 
     var thisDate = arg._d.getDate(); 
     if (thisDate<10){thisDate = "0"+thisDate;} 
     var thisYear = arg._d.getYear()+1900; 
     var thisCompare = thisYear +"-"+ thisMonth +"-"+ thisDate; 

    return moment(thisCompare).isBetween(disableRangeStartDate, disableRangeEndDate); 
     } 
}); 
相關問題