Gunther Oracle APEX und Datenbank Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
=====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/