jQuery DatePicker, select and interval of dates -


i'm trying make selection of dates interval of 5 days selected date.

i'm using beforeshowday method, can't find way currentdate , return custom class days ( current + 4 ).

i have created jsfiddle show how this. picky backed on yozomiri's answer in so post

note datepicker instance still store clicked date current date. jquery datepicker designed allow 1 date selected. you'll have handled storing multiple selected dates yourself.

essentially:

$(function () {     var $date = $('#date').datepicker({         onselect: function (datetext, inst) {             var $picker = inst.dpdiv;             var $alldates = $picker.find('table.ui-datepicker-calendar td'); // date elements              //this important line.             //setting false prevents redraw.             inst.inline = false;              //the remainder of function preserves              //highlighting functionality without redrawing.              //this removes existing selection styling.             $picker.find('.ui-datepicker-current-day')                 .removeclass("ui-datepicker-current-day").children().removeclass("ui-state-active");              //this finds selected link , styles accordingly.             //you can change selectors, depending on layout.             $picker.find('a').each(function () {                 if ($(this).text() == inst.selectedday) {                     // remove current selected date styles                     $picker.find('.ui-datepicker-current-day')                         .removeclass('ui-datepicker-current-day')                         .children()                         .removeclass("ui-state-active");                     // td element of current date                     var $selecteddate = $(this).parent();                     // index of current date within of dates                     var index = $alldates.index($selecteddate);                     $alldates.slice(index, index + 5)                         .addclass('ui-datepicker-current-day')                         .find('a').addclass('ui-state-active');                 }             });             alert($date.datepicker('getdate')); // clicked date         }     }); }); 

Comments