jQuery UI - Datepicker

[Sophie]

Hallo,

meine User meinen mich etwas verarschen zu müssen. Diesem möchte ich gerne entgegenwirken. Ich nutze den jQuery UI Datepicker

var dateFormat = "dd.mm.yy",
		   
		    from = $( "#start" )
		        .datepicker({
		          
		        <?php if ($object->type == "gast") { ?>
					minDate: 2
				<?php } ?>
		    	})
		       
		        .on( "change", function() {
		          to.datepicker( "option", "minDate", getDate( this ) );
		        }),
		     
		    to = $( "#ende" ).datepicker({
		       	minDate: 2
		      })
		      
		      .on( "change", function() {
		        from.datepicker( "option", "maxDate", getDate( this ) );
		      });
		 
		    function getDate( element ) {
		      var date;
			      try {
			        date = $.datepicker.parseDate( dateFormat, element.value );
			      } catch( error ) {
			        date = null;
			      }
		      return date;
		    }

Jetzt möchte ich gerne erreichen dass man erst das #start auswählen muss bevor man das Feld #ende auswählen kann. Ist dieses möglich?

Und wenn man später das Feld start ändert, sollte das Feld ende wieder leer sein. Ich hoffe man bekommt beides irgendwie mit wenig Code umgesetzt.

[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

[Sophie]

Hallo @Rolf b

vielen lieben Dank für deine Erklärung, leider verstehe ich überhaupt nichts. Ich habe das Script 1zu1 von der offiziellen jquery UI Seite genommen.

Der Code, der von dir rot geschrieben wurde kommt in meinem Code überhaupt nicht vor.

[Rolf b]

Hallo Sophie,

nee, der konnte auch nicht vorkommen, der basierte ja auf meinem Vorschlag mit onSelect statt .on('click'). Auf der Demo-Seite von jQuery UI war ich gar nicht, statt dessen auf der Doku-Seite des Datepickers. Dass die jQuery UI Kollegen mit .on('change') und einem externen Datumsparser arbeiten, statt mit den vorhandenen Konstrukten des datepickers, finde ich recht merkwürdig. Vielleicht ist die Demo etwas älter...

Das prop("disabled") hast Du immerhin gebrauchen können, meinen Hinweis, diese Vorgehensweise besser nicht zu wählen, leider nicht. Deine Entscheidung.

Rolf

[Sophie]

Hallo @Rolf b

so funktioniert es:

var dateFormat = "dd.mm.yy",
		   
		    from = $( "#start" )
		        .datepicker({
		          
					minDate: 2
		    	})
		       
		        .on( "change", function() {
		          to.datepicker( "option", "minDate", getDate( this ) );
		          $("#ende").prop("disabled", false);
		        }),

		     
		    to = $( "#ende" ).datepicker({
		       	minDate: 2
		      })
		      
		      .on( "change", function() {
		        from.datepicker( "option", "maxDate", getDate( this ) );
		      });
		 
		    function getDate( element ) {
		      var date;
			      try {
			        date = $.datepicker.parseDate( dateFormat, element.value );
			      } catch( error ) {
			        date = null;
			      }
		      return date;
		    }

		    $("#ende").datepicker({dateFormat: 'dd.mm.yy'}).prop("disabled", true);