user interface - Jquery UI Datepicker: Highlight first -
i want add class first 3 selectable days if var express true.
the following code works if select date classes being removed
$datepicker.datepicker({ daynamesmin: ["s", "m", "d", "m", "d", "f", "s"], beforeshowday:$.datepicker.noweekends, firstday: 1, mindate: d, dateformat: "dd.mm.yy", onselect: function (datetext, inst) { $('.delivery-date').text(datetext); var printreleasedateparts =datetext.split('.'); var printreleasedate = new date(printreleasedateparts[2],printreleasedateparts[1]-1,printreleasedateparts[0]); printreleasedate.setdate(printreleasedate.getdate() - printrelease); $('.print-release-date').text($.datepicker.formatdate('dd.mm.yy', printreleasedate)); $datepicker.removeclass('express'); if (express) { $datepicker.addclass('express'); $('*[data-handler="selectday"]:lt(3)').addclass('express'); } else { $datepicker.removeclass('express'); $('*[data-handler="selectday"]:lt(3)').removeclass('express'); } }, onchangemonthyear: function(){ console.log('onchangemonthyear'); } });
the var express set checkbox. in end, user should able select highlighted express-delivery-date if checkbox checked. express-delivery-date 3 days before regular initiated first selectable day. first selectable day changed checkbox on change
$('input:checkbox[name=option-express]').change(function () { if ($(this).prop("checked") == true) { $datepicker.addclass('express'); var d = calculatemindate(deliveryexpress); $datepicker.datepicker("option", "mindate", d); $('*[data-handler="selectday"]:lt(3)').addclass('express'); express = true; } else { $datepicker.removeclass('express'); var d = calculatemindate(deliveryregular); $datepicker.datepicker("option", "mindate", d); $('*[data-andler="selectday"]:lt(3)').removeclass('express'); express = false; } });
only business days should highlighted.
so what's best practice highlight first days?
edit:
now implemented custom function beforeshowday no luck. console.log fired 4 times class isn't added.
var expressdates = ["08/29/2016", "08/30/2016", "08/31/2016", "09/01/2016"]; function expressdays(date) { var noweekend = $.datepicker.noweekends(date); if (noweekend[0] && express) { (var = 0; < expressdates.length; i++) { if (new date(expressdates[i]).tostring() == date.tostring()) { console.log('express day!') return [true, 'express', 'express']; } } return [true, '']; } else { return noweekend; } }
ok, figured out self. modified function beforeshowday. put express date in array , check $.inarray()
function expressdays(date) { var noweekend = $.datepicker.noweekends(date); var expressdates = []; (var = 0; < deliveryexpress-1; i++) { expressdates.push(moment($datepicker.datepicker("option", "mindate")).businessadd(i).format('l')) } if (noweekend[0] && express) { var datestring = $.datepicker.formatdate('mm/dd/yy', date); if($.inarray(datestring,expressdates) >=0){ return [true, 'express', 'express']; }else{ return [true, 'noexpress']; } } else { return noweekend; } }
Comments
Post a Comment