Focal Point
[SOLVED] Year in calendar picker

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/3867028296

March 11, 2020, 11:48 AM
Les J
[SOLVED] Year in calendar picker
Currently the year in the calendar tool will only allow you to go back -50 years. Which means it is useless if you want to use it as a birthdate. What is the easiest solution to get around this since programming sees no need in changing this default?

This message has been edited. Last edited by: FP Mod Chuck,


WebFOCUS 8

Windows, All Outputs
March 11, 2020, 11:51 AM
BabakNYC
Could you provide us with the specific version of WebFOCUS 8 you're using?
Also, is this with the autoprompt or are you putting this in an HTML composer page in App Studio?

Sample fex would be very helpful too.


WebFOCUS 8206, Unix, Windows
March 11, 2020, 02:01 PM
MartinY
From HTML composer, the calendar control settings can only go from +/-50 years.
Do not allow to go below or over that.

Maybe a NFR


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
March 11, 2020, 02:21 PM
Maintain Wizard
Les
If this was Maintain, you could preset the variable populating the calendar with a date like 1930/01/01. When I click on the year drop down I see 1920 - 2030.

It looks like if you set a Static Value like that it works as well.

Mark
March 12, 2020, 10:24 AM
Les J
I was able to get a work around from Tech Support using js. This allows the calendar year datepicker to go back 100 years.

var today = new Date();
var yy = today.getFullYear()-100;
var fromDate = new Date();
fromDate.setFullYear(yy, 0, 1);
var toDate = new Date();
toDate.setFullYear(toDate.getFullYear() + 100);
IbComposer_setCalendarDatesRange('calendar1', fromDate, toDate);


WebFOCUS 8

Windows, All Outputs
March 12, 2020, 03:46 PM
Hallway
Use a static date range and you can go back to 1850


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
March 12, 2020, 07:54 PM
Hallway
IBI uses jQueryUI for their forms, so the library is already loaded (along with jQuery) and in the 'Embedded Javascript' tab you can easily change any of the options listed here: https://api.jqueryui.com/datepicker/

Just do the following to put your custom calendar control:
Here is an example that uses the jQuery animations to scale in from the button
  
function window_onload() {
    UpdateData();
    const calendar1 = document.getElementById('calendar1');
    $(calendar1).removeClass().datepicker({
        showAnim: "scale",
        showOptions: { origin: ["top", "right"] },
        showOtherMonths: true,
        selectOtherMonths: true,
        hideIfNoPrevNext: true,
        yearRange: '-100:+0',
        minDate: '-100y',
        maxDate: 0,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "/ibi_apps/ibi_html/javaassist/ibi/html/maint/dynCalendar.png",
        buttonImageOnly: true,
        buttonText: "Select date",
    });
}



Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs: