PickMeUp日期選擇器 - 禁用日期陣列

Question

我正在使用PickMeUp datepicker選擇多個日期。我希望能夠傳遞一組日期，禁用這些日期並以不同的顏色顯示它們。

我目前只有以下代碼：

$('.multiple').pickmeup('clear'); 
$('.multiple').pickmeup({ 
    flat: true, 
    mode: 'multiple' 
}); 

如果有人知道如何做到這一點，我將非常感激。

Answer 1

你需要做的是將日期加載到數組中。然後你可以用PickMeUp的object render event來檢查這個數組，然後檢查數組中的日期和日期。如果任何一個日期重合，您只需返回對象disabled: true，用戶將無法選擇日期。

此外，我還返回類disabled以改善禁用日期的CSS顏色。這是因爲PickMeUp的禁用日期的默認顏色方案是黑色;這使得很難看到它們。

以下使用Javascript/jQuery的達到你想要什麼：

// Creating some 'sample' dates 
var datesArray = []; 
var d = new Date(); 
for (i = 2; i < 7; i++) { 
    var tempDay = new Date(); tempDay.setHours(0,0,0,0); 
    tempDay.setDate(d.getDate()+i); 
    datesArray.push(tempDay.getTime()); 
} 

$(function() { 
    $('.multiple').pickmeup({ 
     flat: true, 
     mode: 'multiple', 
     // Before rendering each date, deselect dates if in the array 
     render: function(date) { 
      if ($.inArray(date.getTime(), datesArray) > -1){ 
       return { 
        disabled : true, 
        class_name : 'disabled' 
       } 
      } 
     } 
    }); 
}); 
// Little hack to deselect current day: PickMeUp forces you to have a default date :(
$('.pmu-today').click(); 

用下面CSS：

.disabled { 
    color: #5C5C8A !important; 
    background: #000033; 
} 

DEMO