prog:apex_datepicker
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | |||
prog:apex_datepicker [2019/08/29 14:37] – gpipperr | prog:apex_datepicker [2019/08/29 15:02] (aktuell) – [Eingebaute Lösung für Monat/Jahr Auswahl verwenden] gpipperr | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | =====Oracle Apex 18/19 - UI Widget DatePicker anpassen ===== | ||
+ | **Aufgabe** : Monat und Jahr sollen auf einem DatePicker Widget ausgewählt werden, Montag soll die erste Spalte in der Datumsliste sein. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | So soll das am Ende aussehen: | ||
+ | |||
+ | |||
+ | |||
+ | {{ : | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === Eingebaute Lösung | ||
+ | |||
+ | **Lösung** : | ||
+ | |||
+ | Einfach im Page Designer auswählen das "Monat Jahr" auswählbar sein soll | ||
+ | |||
+ | |||
+ | * {{ : | ||
+ | * Anzahl der Jahr noch einstellen wie : **-20: | ||
+ | |||
+ | |||
+ | |||
+ | Allerdings kann der Start auf Montag nicht so einfach gesetzt werden, schade das hier nicht direkt mit JSON als Config gearbeitet werden kann. | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Selber Konfigurieren === | ||
+ | |||
+ | |||
+ | **Lösung** : | ||
+ | |||
+ | Das das bereits vom Datepicker Widget von jQuery unterstützt wird, muss nur die richtige Option auf dem Widget gesetzt werden. Die Möglichkeiten des Widgest werden hier beschrieben => https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | Ablauf: | ||
+ | - Klasse auf die/den Item setzen die das Date Picker Widget verwenden | ||
+ | - Dynamic Action on "Page Load" definieren um die Eigenschaften zu setzen <code javascript> | ||
+ | |||
+ | // set Monday on the first line | ||
+ | $(' | ||
+ | |||
+ | //add the select lists for month and year | ||
+ | $(' | ||
+ | $(' | ||
+ | |||
+ | // changing option defaults the item to the orginal css values | ||
+ | // add the APEX Button classes to get the typical APEX style back! | ||
+ | $(' | ||
+ | |||
+ | </ | ||
+ | - CSS Hinterlegen um die Schrift und Größe der Select Listen für Monat/Jahr einzustellen, | ||
+ | |||
+ | select.ui-datepicker-year { | ||
+ | color: #bb6565; | ||
+ | font-family: | ||
+ | font-size: 1.5rem !IMPORTANT; | ||
+ | |||
+ | } | ||
+ | |||
+ | body .ui-datepicker select.ui-datepicker-month, | ||
+ | width: 40%; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | Nun ist nur noch die spannende Aufgabe zu lösen das auch im Interactive Grid zum Leben zu bekommen. | ||
+ | |||
+ | Leider ist mir das noch nicht gelungen, habe gerade gar keine Ahnung wie ich eine Referenz auf das Wiget bekomme wenn es aus einer Interactive Grid Zelle geöffnet wird. 8-O | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | |||
+ | Thanks to Maxime Tremblay for this Blog Entry => http:// | ||
+ | Irvin Dominin | ||
+ | |||
+ | |||
+ | Web: | ||
+ | |||
+ | * https:// | ||
+ | |||
+ | |||
+ |
prog/apex_datepicker.txt · Zuletzt geändert: 2019/08/29 15:02 von gpipperr