javascript - several jquery datepicker widgets, add class to only one of them -
i have problem jquery datepicker.
i have form several datepicker inputs , 1 of inputs need select whole week, while in other one, need work regular way; thing when add class (ui-weekpicker) widget first input user can select whole week,the class affects inputs in form, @ least hover event, meaning other inputs in onselect event show correct date... how can prevent happen? here code week-select datepicker
$('#jump-picker').datepicker('destroy').val('').attr('placeholder','select week'); $('#jump-picker').datepicker( { yearrange: "-3:+3", showothermonths: true, selectothermonths: true, language :'es', options: { dateformat : 'dd/mm/yy', showanim : 'slidedown', }, onselect: function(datetext, inst) { var date = $(this).datepicker('getdate'); var startdate = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday()); var enddate = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); var dateformat = inst.settings.dateformat || $.datepicker._defaults.dateformat; $('#jump-picker').val($.datepicker.formatdate( dateformat, startdate, inst.settings ) + ' - ' + $.datepicker.formatdate( dateformat, enddate, inst.settings )); var year = startdate.getfullyear(), month = startdate.getmonth(), day = startdate.getdate() - startdate.getday(); $('#calendar').fullcalendar ('gotodate', year, month, day); selectcurrentweek(); }, beforeshow: function() { selectcurrentweek(); }, beforeshowday: function(date) { var cssclass = ''; if(date >= startdate && date <= enddate) cssclass = 'ui-datepicker-current-day'; return [true, cssclass]; }, onchangemonthyear: function(year, month, inst) { selectcurrentweek(); } }).datepicker('widget').addclass('ui-weekpicker').removeclass ('hide-calendar monthdatepicker hidetodaybutton'); $('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addclass('ui-state-hover'); }); $('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeclass('ui-state-hover'); });
thanks help
rather chaining call .addclass('ui-weekpicker') off $('#jump-picker') selector, add second invocation retrieve 1 of elements:
$('#jump-picker.week').addclass('ui-weekpicker')
or, if you're unable add class 1 element , not other
$('#jump-picker').first().addclass('ui-weekpicker')
will add class first element matched.
as aside, it's bad practice use id
s when have more 1 element, they're supposed unique within document. you'd best served use class jump-picker
instead.
Comments
Post a Comment