Can I highlight an entire week in the standard Jquery UI date picker?

Viewed 31132

Can I highlight an entire week in the standard Jquery UI date picker?

12 Answers

Here's an article that has an example of how to select an entire week with the datepicker.

$(function()
{
    $('.date-pick').datePicker({selectWeek:true,closeOnSelect:false});
});    

I was looking to do the same thing but also wanted the input field to display the selected week range -- here's what I ended up doing (basically use the altField to store the selected date, but display a formatted week range in the input field that is replaced by the actual date using the datepicker beforeShow callback. Coffeescript is below; gist can be found here: https://gist.github.com/2048010

    weekchooser = -> 
    $('#datepicker').datepicker({
        dateFormat: "M d, yy",
        altFormat:  "M d, yy",
        altField:       "#actualdate",
        selectWeek: true,
        firstDay:       1,
        showOtherMonths: true,
        selectOtherMonths: true,
        beforeShow: -> 
            $('#datepicker').val($('#actualdate').val())
        onClose: (date) ->
            reformatWeek(date)
            this.blur()
    }).click -> 
        currentDay = $('.ui-datepicker-current-day')
        currentDay.siblings().find('a').addClass('ui-state-active')

    calendarTR = $('.ui-datepicker .ui-datepicker-calendar tr');
    calendarTR.live 'mousemove', (event) ->
        $(this).find('td a').addClass('ui-state-hover');

    calendarTR.live 'mouseleave', (event) ->
        $(this).find('td a').removeClass('ui-state-hover');

    reformatWeek = (dateText) ->
        $('#datepicker').datepicker('refresh')
        current = parseInt($('.ui-datepicker-current-day').find('a').html())
        weekstart = parseInt($('.ui-datepicker-current-day').siblings().find('a').first().html())
        weekend     = parseInt($('.ui-datepicker-current-day').siblings().find('a').last().html())
        pattern = ///
            ^([a-zA-Z]+)\s+([0-9]{1,2})(,.*)
        ///
        [month, day, year] = dateText.match(pattern)[1..3]
        date = if weekstart > current
            first_month = relativeMonth(month, -1)
            "#{first_month} #{weekstart} - #{month} #{weekend}#{year}"
        else if weekend < current
            last_month = relativeMonth(month, 1)
            "#{month} #{weekstart} - #{last_month} #{weekend}#{year}"
        else
            "#{month} #{weekstart} - #{weekend}#{year}"
        $('#datepicker').val( date )

    relativeMonth = (month, c) -> 
        monthArray = $('#datepicker').datepicker('option', "monthNamesShort")
        index = monthArray.indexOf(month)
        if c > 0
            return if index + c > monthArray.length - 1 then monthArray[0] else monthArray[index + c]
        else
            return if index + c < 0 then monthArray[monthArray.length - 1] else monthArray[index + c]
Related