Flatpickr - Begrenzen Sie die Anzahl der Daten, die ausgewählt werden können

Question

Ich verwende "Flatpickr" als Datetime-Picker in meiner App. Diese Datumsauswahl ermöglicht die Auswahl mehrerer Daten, aber nach dem Lesen der Dokumente kann ich keine Möglichkeit finden, die maximale Anzahl ausgewählter Daten zu begrenzen.

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("")); 

    } 
}); 

Hier, wenn 3 Tage, um die Konsole Ausgänge ausgewählt werden „Sie haben Ihr Limit erreicht“ und ich dachte, vielleicht habe ich alle Termine deaktivieren können (abgesehen von vorher ausgewählten), wenn dies der Fall ist.

Flatpickr hat eine disable und enable Funktion, aber ich bin mir nicht sicher, wie ich das in den Code integrieren kann ... Ich bin ein Anfänger jquery.

Die Dokumente zeigen diese beiden Methoden;

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

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

und

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

Answer 1

können Sie verwenden:

set(option, value): Setzt eine Konfigurationsoption optionto Wert, den Kalender neu zu zeichnen und die aktuelle Ansicht zu aktualisieren, falls erforderlich

Um alle Daten außer den 3 ausgewählten zu deaktivieren schreiben:

instance.set('enable', selectedDates); 

und um Sie zurücksetzen können:

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

Ein anderer Ansatz basiert auf Enabling dates by a function werden können:

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

Das Snippet:

$('#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">