Einen erweiterten Datepicker an ein Eingabefeld anbinden
Scriptcase bringt zwar eine integrierte Datumsauswahl (Popup Datepicker) für Datumsfelder mit.
Dieser kann aber nicht an andere Felder angebunden oder getrennt verwendet werden. Außerdem fehlen ihm erweiterte Funktionen wie zum Beispiel eine Mehrfachauswahl.
Dazu kann man z.B. den jQuery Datepicker von Keith Wood verwenden.
Er kann als externer Bibliothek in Scriptcase Projekte geladen werden.
Wir haben ihn für unser Beispiel als datepick in eine projektbezogene Bibliothek geladen und diese aktiviert.
In Scriptcase kann er in einem Control oder einer Form im onLoad Event geladen werden:
|
1 2 3 4 5 6 7 |
?> <link rel="stylesheet" type="text/css" href="<?php echo sc_url_library('prj', 'datepick', 'css/jquery.datepick.css'); ?>"> <script type="text/javascript" src="<?php echo sc_url_library('prj', 'datepick', 'js/jquery.plugin.js'); ?>"></script> <script type="text/javascript" src="<?php echo sc_url_library('prj', 'datepick', 'js/jquery.datepick.js'); ?>"></script> <script type="text/javascript" src="<?php echo sc_url_library('prj', 'datepick', '/js/jquery.datepick-de.js'); ?>"></script> <?php |
Anmerkung: jQuery selbst laden wir hier nicht. Es ist in Scriptcase standardmäßig geladen.
Beispiel (Auswahl von drei Daten):
Es wird ein Text-Feld mit Namen date_picker eingefügt und die Länge sowie die Anzahl der möglichen Zeichen entsprechend gesetzt.
Im Debug-(Untersuchen)-Modus des Browsers ermittelt man die ID des Feldes. Bei uns lautet die von Scriptcase vergebene: id_sc_field_date_picker
Um dem Feld einen Pop-Up Datepicker mit Mehrfach-Auswahl zuzuweisen ergänzen wir im onLoad Event noch:
|
1 2 3 4 5 6 7 |
?> <script> $(document).ready(function() { $('#id_sc_field_date_picker').datepick({multiSelect:20}); }); </script> <?php |
In diesem Beispiel haben wir gleich eine Mehrfachauswahl mit max. 20 Einträgen definiert.
Soll der Datepicker beim Anzeigen der Applikation automatisch eingeblendet werden:
|
1 2 3 4 5 6 7 8 |
?> <script> $(document).ready(function() { $('#id_sc_field_date_picker').datepick({multiSelect:20}).datepick('show'); }); </script> <?php |
Wenn das Datum bei der Auswahl gleich in einem zweiten Feld (ID: id_sc_field_alt_date_picker ) in einem anderen Format mit geschrieben werden soll:
|
1 2 3 4 5 6 7 8 |
?> <script> $(document).ready(function() { $('#id_sc_field_date_picker').datepick({multiSelect:20 , altField:'#id_sc_field_alt_date_picker', altFormat:'yyyy-mm-dd'}).datepick('show'); }); </script> <?php |
Man kann den Datepicker auch in einem div anzeigen. Dann wird er immer eingeblendet.
Das Ergebnis erscheint in dem Beispiel in dem Alternativ-Feld.
Dazu brauchen wir ein Label-Feld um das DIV auf der Control zu platzieren:
|
1 2 3 4 5 6 7 8 9 10 |
{my_div} = "<div id='my_dd'></div>"; ?> <script> $(document).ready(function() { $('#my_dd').datepick({multiSelect:20 , altField:'#id_sc_field_alt_date_picker', altFormat:'yyyy-mm-dd'}); }); </script> <?php |
