views:

438

answers:

1

I want to, when the user selects a date, highlight the following 11 days. The intention is to show a 12-day range selected depending on whatever day was chosen.

I've seen the "date range picker" from http://www.filamentgroup.com/ suggested, but this doesnt really give me the visualization i want, it just lets a user pick a range (from/to) as i understand it.

Any suggestion on how i can realize this?

Cheers

+1  A: 

You can use the beforeShowDay event to give a CSS style for the dates you need to highlight.

Code:

$(document).ready(function(){
    var selected = null;

    $('#datePicker').datepicker({beforeShowDay: function(date) {
                        if (selected != null && date.getTime() > selected.getTime() &&
                            (date.getTime() - selected.getTime()) < 12*24*3600*1000) {
                            return [true, "highlighted"];
                        }
                        return [true, ""];
                    }});

    $("#datePicker").datepicker( 'option' , 'onSelect', function() {
            str = $(this).val().toString();
            selected=$.datepicker.parseDate('mm/dd/yy', str);
            console.log(selected);
            });
});
kgiannakakis
I have looked into this, but as i understand it (with my somewhat limited jquery/js expertise) i would be able to do this on load, but not every time its clicked? I mean disregarding the onload functionality where it runs it for every date, everytime a date is selected, ill get the selected date in my function, how can i then check of the following 11 days? I might be missing something obvious here
hard_life
ah, fantastic! thank you!
hard_life