javascript - Customize Jquery UI Datepicker - Stack Overflow

admin管理员组

文章数量:1323711

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 pany 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.

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 pany 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.

• javascript
• jquery
• html
• jquery-ui

2 Answers 2

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.

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

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;
}

$('.dateinput').datepicker({
    dateFormat:'yy-mm-dd',
    duration: 'normal',
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    /*other options goes here...*/
    calculateWeek: function(mydate){
        return 'FW'+(
            $.datepicker.iso8601Week(mydate + 1/*offset A*/)+1/*or offsetB*/
        );
    }
});