Блог

Я не знаю, как это называется, я думаю, что-то вроде reset..

Случай такой: я использую встроенный datepicker, а затем добавляю новый класс с собственным стилем (css) к некоторой дате в datepicker. Ниже приведен код:

 $("#calendar").datepicker({ 
                            showOtherMonths: true, 
                            onSelect:function(){
                                                alert($(this).val());
                                                }
                            });
$(document).ready(function(){
    customDate();
});                         
function customDate(){
    $("#calendar a:eq(10)").addClass("has_event");
}
  

приведенный выше код добавит новый класс в 10-й элемент с индексом ‘a’, и стиль для этого класса будет:

 .has_event{
    color:#bb0000 !important;
    font-weight:bold !important;
    background:#cccccc !important;
}
  

Функция customDate() сначала работает хорошо, но после выбора datepicker стиль сбрасывается до значения по умолчанию, потому что добавленный новый класс исчез.

Итак, кто-нибудь знает, как предотвратить сброс datepicker после выбранного или даже после события onSelect?

@S.M.09 вот что я сделал :

 _selectDay:function(id,month,year,td){var target=$(id);if($(td).hasClass(this._unselectableClass)||this._isDisabledDatepicker(target[0])){return}var inst=this._getInst(target[0]);inst.selectedDay=inst.currentDay=$("a",td).html();inst.selectedMonth=inst.currentMonth=month;inst.selectedYear=inst.currentYear=year;if(inst.stayOpen){inst.endDay=inst.endMonth=inst.endYear=null}this._selectDate(id,this._formatDate(inst,inst.currentDay,inst.currentMonth,inst.currentYear));if(inst.stayOpen){inst.rangeStart=this._daylightSavingAdjust(new Date(inst.currentYear,inst.currentMonth,inst.currentDay));this._updateDatepicker(inst)} if(id=="#calendar"){$("#calendar a:eq(10)").addClass("has_event");}}
  

Если вы обычно хотите, чтобы некоторые дни были оформлены по-другому, вы можете поместить их в массив (чтобы они были постоянными и динамическими)

 var myDates = [9,13];
  

и используйте событие beforeShowDay ^docs для проверки каждого дня, отображаемого в вашем массиве

  beforeShowDay:function(date) {
                      var thisDay = date.getDate();

                      return [1,((myDates.indexOf(thisDay))>-1)?'has_event':''];
                    }
  

это относится к td , поэтому вам нужно изменить свой css на .has_event a{..

демонстрация: http://jsfiddle.net/gaby/dTRNf /

В jQuery js(jquery-ui-x.x.x.custom.min.js)…вы обнаружите вызываемую функцию с четырьмя аргументами (имена переменных могут отличаться в зависимости от версии)

 _selectDay:function(a,b,c,d)
  

добавьте код непосредственно перед завершением функции

 if(a=="#calendar"){
$("#calendar a:eq(10)").addClass("has_event");
}
  

удалите if condition , если вы хотите, чтобы это было глобально…приведенный выше код применит его только к нужному вам календарю

Редактировать

 _selectDay:function(a,b,c,e){
    var f=d(a);
    if(!(d(e).hasClass(this._unselectableClass)||this._isDisabledDatepicker(f[0]))){
        f=this._getInst(f[0]);
        f.selectedDay=f.currentDay=d("a",e).html();
        f.selectedMonth=f.currentMonth=b;
        f.selectedYear=f.currentYear=c;
        this._selectDate(a,this._formatDate(f,f.currentDay,f.currentMonth,f.currentYear))
        }
    if(a=="#calendar"){
    $("#calendar a:eq(10)").addClass("has_event");
    }


},