2017-07-29 130 views
1

我在我的應用程序中使用'flatpickr'作爲日期時間選取器。這個日期選擇器允許選擇多個日期,但在閱讀文檔後,我無法找到任何限制所選日期的最大數量的方法。Flatpickr - 限制可選日期的數量

的Jquery:

$('#gig_date_multi').flatpickr({ 
    "mode": "multiple", 
    "locale": "<%= I18n.locale %>", 
    minDate: new Date(), 
    enableTime: true, 
    time_24hr: true, 
    minuteIncrement: 15, 

    onChange: function(selectedDates, dateStr, instance) { 

     var array = selectedDates; 
     if (array.length >= 3) { 
     console.log("YOU HAVE REACHED YOUR LIMIT") 
     } else { 
     console.log("YOU CAN STILL SELECT MORE DATES") 
     } 

     var newHTML = []; 
     $.each(array, function(index, value) { 
     var formatted = moment(value).format("HH:mm - dddd Do MMMM YYYY"); 
     newHTML.push('<span>' + formatted + '</span>'); 
     }); 

     $(".multi-dates").html(newHTML.join("")); 

    } 
}); 

這裏的時候,3個日期選擇控制檯輸出「你已經達到了極限」,我想也許我可以(從先前選定的間隔)禁止所有日期時,發生這種情況。

Flatpickr有disableenable函數,但我不確定如何將它集成到代碼中...我是一個jQuery初學者。

該文檔顯示了這兩種方法;

{ 
    "disable": [ 
     function(date) { 
      // return true to disable 
      return (date.getDay() === 5 || date.getDay() === 6); 

     } 
    ], 
    "locale": { 
     "firstDayOfWeek": 1 // start week on Monday 
    } 
} 

{ 
    enable: ["2017-03-30", "2017-05-21", "2017-06-08", new Date(2017, 8, 9) ] 
} 
+0

這些是可以選擇的日期範圍或單個日期嗎? – Cue

+0

@Cue這些是可以選擇的單獨日期。 –

回答

2

您可以使用:

set(option, value):設置optionto值的配置選項,重繪日曆和更新,目前看來,如果必要的話

爲了禁用除選定的3個人之外的所有日期可以這樣寫:

instance.set('enable', selectedDates); 

,並以重置您可以:

instance.set('enable', []); 

一種不同的方法可以根據Enabling dates by a function

instance.set('enable', [function(date) { 
    if (selectedDates.length >= 3) { 
     var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y") 
     var x = selectedDatesStr.indexOf(currDateStr); 
     return x != -1; 
    } else { 
     return true; 
    } 
}]); 

的片段:

$('#gig_date_multi').flatpickr({ 
 
    "mode": "multiple", 
 
    "locale": 'en', 
 
    minDate: new Date(), 
 
    enableTime: true, 
 
    time_24hr: true, 
 
    minuteIncrement: 15, 
 
    onChange: function(selectedDates, dateStr, instance) { 
 
     var selectedDatesStr = selectedDates.reduce(function(acc, ele) { 
 
      var str = FlatpickrInstance.prototype.formatDate(ele, "d/m/Y"); 
 
      acc = (acc == '') ? str : acc + ';' + str; 
 
      return acc; 
 
     }, ''); 
 
     instance.set('enable', [function(date) { 
 
      if (selectedDates.length >= 3) { 
 
       var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y") 
 
       var x = selectedDatesStr.indexOf(currDateStr); 
 
       return x != -1; 
 
      } else { 
 
       return true; 
 
      } 
 
     }]); 
 
    } 
 
});
input[type="text"] { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing: border-box; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css"> 
 
<script src="https://unpkg.com/flatpickr"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 

 

 
<input type="text" id="gig_date_multi">

+0

雖然這似乎幾乎工作,似乎有代碼的錯誤。如果我選擇3個日期,則取消選擇一個,所有時間都將更改爲00:00。 –

+0

@RobHughes你說得對。抱歉耽擱了。代碼段已更新。讓我知道。謝謝 – gaetanoM

+0

非常感謝這一點,這現在工作。 「啓用」或「禁用」功能似乎刪除所有時間數據。我以前更改過的代碼隱藏和顯示日期使用css選擇器似乎工作正常,但我更喜歡你的代碼,但我不明白所有。 –

相關問題