jQuery ui - средство выбора даты предотвращает обновление при выборе

Я использую jQuery ui Datepicker для отображения годового встроенного календаря, полного «особых дат» (с цветами). введите описание изображения здесьЭто позволяет пользователям группировать специальные даты, выбирая диапазон и некоторые другие детали.

$('#calendar').datepicker({
  ...
  , onSelect: function (selectedDate, inst) {
      $('.date_pick').toggleClass('focused');
      if ($('.date_pick.end').hasClass('focused')) {
        $('.date_pick.end').val('');
      }
      # inst.preventDefault() ? <- not a function
      # inst.stopPropagation() ? <- not a function
      # return (false) ? <- calendar refreshes anyway
    }
  ...
});

Я также использую qtip, чтобы показать детали каждой даты.

Моя проблема в том, что когда я нажимаю на календарь, он полностью перезагружается, поэтому я теряю свои qtips.

Я бы предпочел не использовать live() с qtip, потому что мне не нравится такое поведение.

Я также предпочел бы, чтобы календарь не обновлялся каждый раз, когда я нажимаю на него (но в любом случае это кажется невозможным), но я, вероятно, больше не смогу выделять свой выбор.

У вас есть предложение по моим проблемам?


datepicker refresh jquery-ui qtip
person Pierre de LESPINAY    schedule 19.05.2011    source источник
comment
Вы пробовали решение Йозомири?   -  person Quaternion    schedule 29.06.2011
comment
Могу я увидеть ваш код на скрипке? Я пытаюсь добиться почти такой же функциональности. Пожалуйста, если можно.   -  person Superman    schedule 20.01.2015
comment
Мне жаль, что это старый проект, у меня больше нет доступа к коду. В основном я использовал обратный вызов beforeShowDay для применения CSS   -  person Pierre de LESPINAY    schedule 20.01.2015
comment
Это была комбинация onSelect и beforeShowDay? Вы справились таким образом, что onSelect каждой даты применяла пользовательский css или давала ему массив дат и использовала beforeShowDay для применения к ним класса css? Мне просто нужна идея. Спасибо.   -  person Superman    schedule 20.01.2015
comment
Нет, выбор CSS также обусловлен beforeShowDay, так как щелчок перезагружал весь указатель даты.   -  person Pierre de LESPINAY    schedule 20.01.2015
comment
datepicker('refresh') - у меня работает, спасибо   -  person Sergey    schedule 08.05.2018

Ответы (5)


arrow_upward
27
arrow_downward

У меня была аналогичная проблема. Я добавлял пользовательские кнопки в нижнюю часть средства выбора даты (используя $(id).append), но когда я выбирал дату, средство выбора даты обновляло и уничтожало их.

Это функция выбора даты для средства выбора даты в библиотеке jquery-ui:

_selectDate: function(id, dateStr) {
  ...
    if (onSelect)
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
  ...
    if (inst.inline)
        this._updateDatepicker(inst);
  ...
},

Как видите, функция сначала вызывает событие onSelect, а затем вызывает _updateDatepicker (который перерисовывает форму), если inst.inline имеет значение true.

Это мой обходной путь, чтобы предотвратить обновление формы при сохранении функции выбора:

$("#cal_id").datepicker({
  onSelect: function(date, inst){

    //This is the important line.
    //Setting this to false prevents the redraw.
    inst.inline = false;

    //The remainder of the function simply preserves the 
    //highlighting functionality without completely redrawing.

    //This removes any existing selection styling.
    $(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

    //This finds the selected link and styles it accordingly.
    //You can probably change the selectors, depending on your layout.
    $(".ui-datepicker-calendar TBODY A").each(function(){
      if ($(this).text() == inst.selectedDay) {
        $(this).addClass("ui-state-active");
        $(this).parent().addClass("ui-datepicker-current-day");
      }
    });
  }
});
person Yozomiri    schedule 04.06.2011
comment
Как насчет 1 дня... это сэкономило много дней! Спасибо ! :) Кто-нибудь знает, будет ли эта функция настраиваемой в будущих jQuery-UI? - person jave.web; 11.06.2014
comment
Этот ответ на вес золота! 1000 баллов! Сядьте! :-) - person jMike; 19.09.2016

arrow_upward
1
arrow_downward

установка для inst.inline значения false внутри onselect не будет работать. вместо этого попробуйте что-то вроде

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}
person Min Hur    schedule 14.06.2012

arrow_upward
0
arrow_downward

У меня почти такая же проблема, как и у некоторых других людей. какое-то решение.... но это несправедливо:

$('#calendar').datepicker({
...,
onSelect: function (selectedDate, inst) 
{
  myFunction(selectedDate, inst);
}
});
function myFunction(selectedDate, inst)
{

  $('.date_pick').toggleClass('focused');
  if ($('.date_pick.end').hasClass('focused')) {
    $('.date_pick.end').val('');
  }
  inst.preventDefault(); # aa; works too, but writing aa; is going too far xD
}

Это не идеально, но работает... Я постараюсь, чтобы это работало нормально, а пока...

EDIT: Решено добавление:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
person David Diez    schedule 26.05.2011
comment
inst.preventDefault() ‹- не функция - person Pierre de LESPINAY; 30.05.2011

arrow_upward
0
arrow_downward

Если вы просто хотите выбрать один день, вам нужно указать месяц и год в JQuery:

$(".ui-datepicker-calendar TBODY [data-month='"+inst.selectedMonth+"'][data-year='"+inst.selectedYear+"'] A").each(function(){
person Florian    schedule 21.11.2014

arrow_upward
0
arrow_downward

В случае наличия некоторых средств выбора даты на странице Yozomiri пример не будет выполнен. Ты должен сделать:

        onSelect: function(date, inst){
            //This is the important line.
            //Setting this to false prevents the redraw.
            inst.inline = false;

            //The remainder of the function simply preserves the 
            //highlighting functionality without completely redrawing.

            //This removes any existing selection styling.
            $(this).find(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

            //This finds the selected link and styles it accordingly.
            //You can probably change the selectors, depending on your layout.
            $(this).find(".ui-datepicker-calendar TBODY td").each(function(){
              if ( $(this).find('a').text() == inst.selectedDay && $(this).data('month') == inst.selectedMonth ) {
                $(this).find('a').addClass("ui-state-active");
                $(this).addClass("ui-datepicker-current-day");
              }
            });
        }

https://jsfiddle.net/g2bgbdne/3/

person user2455668    schedule 15.12.2015