Flatpickr - Limite le nombre de dates pouvant être sélectionnées

Question

J'utilise 'flatpickr' comme sélecteur de date/heure sur mon application. Ce sélecteur de date permet de sélectionner plusieurs dates, mais après avoir lu les documents, je ne trouve aucun moyen de limiter le nombre maximum de dates sélectionnées.

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

    } 
}); 

ici lorsque 3 dates sont sélectionnées les sorties de la console « VOUS AVEZ OBTENU VOTRE LIMIT » et je pensais que je pourrais désactiver toutes les dates (à l'exception de celles sélectionnées précédemment) lorsque cela se produit. Flatpickr a une fonction disable et enable mais je ne sais pas comment je peux intégrer cela dans le code ... Je suis un débutant jquery.

Les documents montrent ces deux méthodes;

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

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

et

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

Answer 1

Vous pouvez utiliser:

set(option, value): Définit une option de configuration optionto valeur, redessiner le calendrier et la mise à jour de la vue actuelle, si nécessaire

Afin de désactiver toutes les dates sauf les 3 vous sélectionné peut écrire:

instance.set('enable', selectedDates); 

et, afin de vous remettre peut:

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

Une autre approche peut être basée sur 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; 
    } 
}]); 

L'extrait:

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