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:
Lösung :
Einfach im Page Designer auswählen das „Monat Jahr“ auswählbar sein soll
Allerdings kann der Start auf Montag nicht so einfach gesetzt werden, schade das hier nicht direkt mit JSON als Config gearbeitet werden kann.
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:
MONTH_YEAR_PIC
// 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');
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.
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: