Flatpickr – Begrenzen Sie die Menge der Daten, die ausgewählt werden können

Ich bin mit ‚flatpickr‘ als datetime-picker auf meine app. Diese Datumsauswahl können mehrere Termine ausgewählt werden, aber nach dem Lesen der docs ich finde keine Möglichkeit, den Höchstbetrag für die ausgewählten Daten.

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 Termine ausgewählt, die Konsole Ausgänge „SIE HABEN IHR LIMIT ERREICHT“ und ich dachte, vielleicht könnte ich deaktivieren Sie alle Termine (abgesehen von der zuvor ausgewählten) wenn dies der Fall ist.

Flatpickr hat eine disable und enable Funktion, aber ich bin unsicher, wie ich die einbinden kann, diese in den code… ich bin jquery Anfänger.

Den docs 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) ]
}
  • Sind diese eine Reihe von Daten oder Einzeldaten, die ausgewählt werden können?
  • Es sind individuelle Termine, die ausgewählt werden können.
InformationsquelleAutor Rob Hughes | 2017-07-29



One Reply
  1. 2

    Können Sie verwenden:

    set(option, value): Legt eine config-option optionto Wert, festigen den Kalender und aktualisieren der aktuellen Ansicht, wenn nötig

    Damit deaktivieren Sie alle Termine außer die 3 ausgewählt, können Sie schreiben:

    instance.set('enable', selectedDates);

    ist, und, um zu reset können Sie:

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

    Einen anderen Ansatz basierend auf Aktivieren der Daten, die durch eine Funktion:

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

    Snippet:

    JS:

    $('#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;
                }
            }]);
        }
    });

    CSS:

    input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing: border-box;
    }

    HTML:

    <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">

    • Während dies scheint fast funktioniert, es scheint tatsächlich ein Fehler zu sein mit dem code. Wenn ich wählen 3 Termine, dann deaktivieren Sie alle ändern sich die Zeiten auf 00:00.
    • Du hast Recht. Sorry für die Verspätung. Snippet aktualisiert. Lassen Sie es mich wissen. Dank
    • Vielen Dank für diese, dies funktioniert nun. Der ‚aktivieren‘ oder ‚deaktivieren‘ – Funktionen erschien entfernen Sie alle Zeit-Daten. Ich hatte zuvor verändert den code zum anzeigen und ausblenden von Terminen über css-Selektoren, die schien zu funktionieren ok, aber ich bevorzuge es dein code, auch wenn ich nicht alle verstehen es.
    • Dank so viel.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.