We have a report where the user picks the start and end date. The report is based off of pay periods so we would like to be able to highlight every other Friday in the calendar control as a visual guide when the user is selecting the date range for the report. Does anyone have any advice on this? I searched the forum and documentation and can't seem to find anything.
Thanks!!
Cara

This message has been edited. Last edited by: cldiaz,

in the HTML canvas, on the Embedded Javascript tab paste the following code in the 'window_onload()' function:

  
//Begin function window_onload
function window_onload() {  
    UpdateData();
// TODO: Add your event handler code here
    var your_dates = [
        new Date("01-12-2018").toISOString(), 
        new Date("01-26-2018").toISOString(), 
        new Date("02-09-2018").toISOString(), 
        new Date("02-23-2018").toISOString(), 
        new Date("03-09-2018").toISOString(), 
        new Date("03-23-2018").toISOString(), 
        new Date("04-06-2018").toISOString(), 
        new Date("04-20-2018").toISOString(), 
        new Date("05-04-2018").toISOString(), 
        new Date("05-18-2018").toISOString(), 
        new Date("06-01-2018").toISOString(), 
        new Date("06-15-2018").toISOString(), 
        new Date("06-29-2018").toISOString(), 
        new Date("07-13-2018").toISOString(), 
        new Date("07-27-2018").toISOString(), 
        new Date("08-10-2018").toISOString(), 
        new Date("08-24-2018").toISOString(), 
        new Date("09-07-2018").toISOString(), 
        new Date("09-21-2018").toISOString(), 
        new Date("10-05-2018").toISOString(), 
        new Date("10-19-2018").toISOString(), 
        new Date("11-02-2018").toISOString(), 
        new Date("11-16-2018").toISOString(), 
        new Date("11-30-2018").toISOString(), 
        new Date("12-14-2018").toISOString(), 
        new Date("12-28-2018").toISOString(), 
        new Date("01-11-2019").toISOString(), 
        new Date("01-25-2019").toISOString()
    ];
    $('#calendar1').datepicker({
        beforeShowDay: function (date) {
            var calDate = date.toISOString();
            console.log(calDate);
            var inArray = $.inArray(date.toISOString(), your_dates);
            console.log(inArray);
            if ($.inArray(date.toISOString(), your_dates) !== -1) {
                return [true];
            } else {
                return [false];
            }
        }
    });
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload 

This should disable every date in the calendar picker except the dates listed in the 'your_dates' array.

Of course these are hard coded dates and you would probably want to do an AJAX call to get the dates that you use.

This is better than what I was thinking, I was hoping we could simply highlight but disabling all other dates is awesome! Thanks so much for your help!

This message has been edited. Last edited by: cldiaz,

Excellent. I'm glad that it helped.

I got thinking over the weekend that you can actually figure out the every other Friday dates without using an array. You just need to set a variable as one of the Friday dates that you want to be active. Then use the modulo operation to find the remainder after dividing the difference between the dates by 14. If the remainder is 0 then it is divisible by 14 days and will be active otherwise it will not.

  
//Begin function window_onload

function window_onload() {  

    UpdateData();

// TODO: Add your event handler code here
 
    var fridayDate = new Date("10-19-2018");
 
    $('#calendar1').datepicker({
        showOn: "button",
        buttonImage: "/ibi_apps/ibi_html/javaassist/ibi/html/maint/dynCalendar.png",
        buttonImageOnly: true,
        buttonText: "Select Payroll Date",
        beforeShowDay: function (date) {
            var dateDiff = Math.round((fridayDate - date)/1000/60/60/24);
            var dateMod = dateDiff % 14;
            if (dateMod == 0) {
                return [true];
            } else {
                return [false];
            }
        }
    });
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload

Also, since IBI uses the jQueryUI library for the controls, you can find more documentation on different options here:

https://jqueryui.com/datepicker/

WOW! Thank you so much!!! This link will definitely be a favorite!