jQuery UI - Datepicker

[Rolf b]

Hallo Sophie,

statt .on('change'...) kannst Du auch das onSelect Event von jquery UI verwenden, da hast Du den Vorteil, dass die Handler-Funktion als 1. Parameter das gewählte Datum als String bekommt und als 2. Parameter ein Objekt, worin ein Property mit einem Wrapped Set zum Datepicker zu finden ist. Und DARAUF kannst Du die getDate-Methode des Datepickers anwenden und brauchst keinen eigenen Date-Parser.

$("#startDate").datepicker(
{
   onSelect: function(datum, $startDP) {
      if ($startDP.input)
         var selectedDate = $startDP.input.datepicker('getDate');
   }
});

Das nur nebenbei.

Im onSelect Handler kannst Du, wenn Du ein Date zu Deiner Zufriedenheit gemacht - äh - erhalten hast, jederzeit das Control mit dem Ende-Picker aktivieren. Du kannst dafür z.B. das disabled-Property verwenden, oder mit display:none/display:block arbeiten. Hier ein Beispiel für disabled. Warum ich das rot anpinsele - siehe weiter unten.

$("#startDate").datepicker({
   dateFormat: 'dd-mm-yy',
   onSelect: function(startDate, startPick) {
                var x = startPick.input.datepicker('getDate');
                $("#endDate").prop("disabled", false);
             }
   });
   
$("#endDate").datepicker({dateFormat: 'dd-mm-yy'}).prop("disabled", true);

Ob Du noch irgendwelche Dinge prüfen willst, bevor Du das Endedatum enablest, musst Du natürlich selbst wissen.

So. Warum Rot? Auch wenn Du gerne zornig auf sowas reagierst: Tu das nicht. Es widerspricht der Idee vom progressive enhancement. Die Seite funktioniert nicht mehr, wenn das Script nicht tut, das Ende-Feld wird dann nicht aktiv.

Rolf