wake-up-neo.com

MinDate und maxDate mithilfe von jQuery DatePicker im laufenden Betrieb ändern

Ich habe ein spezielles Problem mit dem jQuery Datepicker. Ich kann problemlos einen Datumsbereich hinzufügen, aber ich möchte, dass sich der auswählbare Bereich je nach Ereignis ändert, das der Benutzer ausgewählt hat.

Wenn sie also Ereignis # 1 auswählen, können sie nur Daten aus dem Datumsbereich von Ereignis # 1 auswählen.

Ich habe eine einfache kleine Funktion geschrieben, die immer dann aufgerufen wird, wenn der Benutzer ein neues Ereignis auswählt. Es werden jedoch immer nur die anfänglich eingestellten Werte für minDate/maxDate angezeigt.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}

Ich habe versucht, $('#date').datepicker('remove'); aufzurufen, bevor Sie die obige Funktion erneut aufrufen, um zu sehen, ob eine neue Instanz mit den richtigen Datumsangaben erstellt wird, aber es scheint nicht zu funktionieren.

Ich habe alle Daten mit Entwicklertools geprüft und alles wird korrekt aufgerufen und weitergegeben. Kann ich irgendetwas tun, um diese Arbeit so zu gestalten, wie ich es möchte?

24
Chuck Le Butt

Sie haben mehrere Möglichkeiten ...

1) Sie müssen die destroy()-Methode aufrufen, nicht remove(), also ...

$('#date').datepicker('destroy');

Rufen Sie dann Ihre Methode auf, um das datepicker-Objekt neu zu erstellen.

2) Sie können die Eigenschaft der vorhandenen object über aktualisieren

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

oder...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });
57
Jared

Von/bis Datum habe ich die Einschränkung der Daten basierend auf dem Datum, das in dem anderen Datumsauswahlfeld eingegeben wurde, implementiert. Funktioniert ziemlich gut:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}
8
MattC
$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});
2

Ich weiß, dass Sie Datepicker verwenden, aber für einige Leute, die nur das HTML5-Eingabedatum wie ich verwenden, gibt es ein Beispiel, wie Sie dasselbe tun können: JSFiddle Link

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/
0
Matias Seguel

Ich habe die Min-Datum-Eigenschaft des Datums und der Uhrzeitauswahl mit dieser Option geändert

$('#date').data("DateTimePicker").minDate(startDate);

Ich hoffe das hilft jemandem!

0
Mustufa