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
Post a Comment