Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_datepicker

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:

 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

  •  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:

  1. Klasse auf die/den Item setzen die das Date Picker Widget verwenden
     MONTH_YEAR_PIC 
  2. Dynamic Action on „Page Load“ definieren um die Eigenschaften zu setzen
     
    // 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');
  3. 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
    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%;
    }

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

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
"Autor: Gunther Pipperr"
prog/apex_datepicker.txt · Zuletzt geändert: 2019/08/29 15:02 von Gunther Pippèrr