Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_datepicker

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
prog:apex_datepicker [2019/08/29 14:37] gpipperrprog: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:
 +
 +
 +
 +{{ :prog:apex:apex_datepicker_ui_widget_with_selectable_month.png | Custom ORACLE APEX Datepicker }}
 +
 +----
 +
 +=== Eingebaute Lösung  für Monat/Jahr Auswahl verwenden ===
 +
 +**Lösung** : 
 +
 +Einfach im Page Designer auswählen das "Monat Jahr" auswählbar sein soll
 +
 +
 +  * {{ :prog:apex:apex_datepicker_ui_widget_with_selectable_month_property.png | Oracle Apex Page Designer set Propery DatePicker}}
 +  * Anzahl der Jahr noch einstellen wie : **-20:+01**  ( 20 Jahre zurück, ein Jahr vor) 
 +
 +
 +
 +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://api.jqueryui.com/datepicker/#option-selectOtherMonths .
 +
 +
 +
 +
 +
 +
 +Ablauf:
 +  - Klasse auf die/den Item setzen die das Date Picker Widget verwenden  <code css> MONTH_YEAR_PIC </code>
 +  - Dynamic Action on "Page Load" definieren um die Eigenschaften zu setzen <code javascript> 
 +
 +// set Monday on the first line
 +$('.MONTH_YEAR_PIC').datepicker("option","firstDay",1);
 +
 +//add the select lists for month and year
 +$('.MONTH_YEAR_PIC').datepicker("option","changeMonth",true);
 +$('.MONTH_YEAR_PIC').datepicker("option","changeYear",true);
 +
 +// changing option defaults the item to the orginal css values
 +// add the APEX Button classes to get the typical APEX style back!
 +$('.MONTH_YEAR_PIC').next('button').addClass('a-Button a-Button--calendar');
 +
 +</code>
 +  - CSS Hinterlegen um die Schrift und Größe der Select Listen für Monat/Jahr einzustellen, bei mir über Custom CSS im ThemaRoller gelöst <code css>
 +
 +select.ui-datepicker-year {
 +    color: #bb6565;
 +    font-family: 'Open Sans', sans-serif;
 +    font-size: 1.5rem !IMPORTANT;
 +   
 +}
 +
 +body .ui-datepicker select.ui-datepicker-month, body .ui-datepicker select.ui-datepicker-year {
 +    width: 40%;
 +}
 +
 +</code>
 +
 +
 +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://max-tremblay.blogspot.com/2018/03/datepicker-customization.html and 
 +Irvin Dominin  for https://www.dotnetcurry.com/jquery/1209/jqueryui-datepicker-tips-tricks
 +
 +
 +Web:
 +
 +  * https://api.jqueryui.com/datepicker/
 + 
 +
 + 
prog/apex_datepicker.txt · Zuletzt geändert: 2019/08/29 15:02 von gpipperr