Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize Jquery UI Datepicker

I most likely suspect is not possible but I wanted to know If someone was has worked with customizing the calendar displayed on Jquery UI datepicker to the extend of changing the dates. Here is my situation: My company uses a fiscal year instead of a calendar year where and it begins on a different day each year, I actually made an excel calendar in the mean time and I could use the principle on javascript, my question is if there is a way to set up an initial date on the calendar and start counting weeks from that day...

Example

Fiscal year starts on August 28 (sunday), given that : AUG28-SEPT3 = FW1
SEPT4-SEPT10 = FW2
SEPT11-SEPT17 = FW3
.
.
.
and so on ... i want to show a calendar with the week number starting on AUG28 2011 (fw1) and ending on aug25 2012 (fw52).

i already read the documentation and I cant' find anything related, if I was not clear enough please let me know so I can rephrase.

like image 893
isJustMe Avatar asked Oct 25 '11 21:10

isJustMe


1 Answers

You will have to create your own week calculation, see the docs for jQuery UI calculateWeek. Its a start, but not too helpful in those doc's. A little more useful was this blog post here.

Anyway here is the code I have managed to hack together, see the link below to see it working.

  • Define the datapicker:
    $("#mydatepicker").datepicker({
        calculateWeek: fisc,
        maxDate: '08/25/12',
        minDate: '08/28/11',
        showWeek: true
    });
    

  • And the function to calculate the weeks:
    function fisc(date) {
        var checkDate = new Date(date.getTime());
        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
        var time = checkDate.getTime();
        checkDate.setMonth(7); 
        checkDate.setDate(28);
        var week = (Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 2);
        if (week < 1) {
            week = 52 + week;
        }
        return 'FW: '+week;
    }
    

    Click here to see this in action

    I'm sure this probably isn't the perfect way to do this, but it seems to work for this time of night, hopefully it will point you in the correct direction.

  • like image 107
    Scoobler Avatar answered Oct 15 '22 19:10

    Scoobler