Скрыть ui-datepicker-календарь на основе атрибута элемента

У меня есть несколько inputs на моей странице, все из которых имеют интерфейс jQuerydatepicker виджет прикреплен к ним.

То, что я хотел бы сделать, - это show/hide .ui-datepicker-calendar, основанный на атрибуте data-calendar элемента input.

Например: 

<input type="text" data-calendar="false" />
<input type="text" data-calendar="false" />
<input type="text" data-calendar="true" />
Итак, первые два не должны показывать .ui-datepicker-calendar, но последние должны.

Я думал, что смогу использовать событие beforeShow для установки отображения элемента, однако в момент запуска события .ui-datepicker-calendar еще не существуют: 

$('input').datepicker({
  beforeShow: function(el, dp) {
    $('.ui-datepicker-calendar').toggle( !$(el).is('[data-calendar="false"]') );
  }
});

Я уже смотрел на подобные вопросы, и ответ заключается в том, чтобы использовать CSS для скрытия элемента .ui-datepicker-calendar: 

.ui-datepicker-calendar {
  display: none;
}

Однако это не будет работать для меня, так как мне нужно установить свойство отображения на основе атрибута элемента data-calendar.

Есть ли простой способ достичь этого? Я посмотрел через окно.datepicker API но ничего не нашел.

Вот простая базовая скрипка

Вот как я хотел бы это показать, если data-calendar является ложным

2 9
jquery jquery-ui-datepicker

2 ответа:

Сделав еще несколько поисков, я наткнулся на этот вопрос, который помог мне решить мою проблему.

Когда событие beforeShow срабатывает, добавьте/удалите класс на элементе #ui-datepicker-div (это существует, как только datepicker был присоединен).

$('input').datepicker({
  beforeShow: function(el, dp) {
    $('#ui-datepicker-div').toggleClass('hide-calendar', $(el).is('[data-calendar="false"]'));
  }
});

Тогда просто добавьте стиль для .ui-datepicker-calendar в классе .hide-calendar: 

.hide-calendar .ui-datepicker-calendar {
  display: none;
}

Вот рабочая скрипка

10

Проверьте атрибут data для каждого входного элемента.

1) .data () - метод, используемый для хранения произвольных данных, связанных с согласованными элементами.

2) .each () - метод, используемый для итерации объектов jQuery.

Попробуйте это.

$('input[type=text]').each(function(){
    alert($(this).data('calendar'));
    if($(this).data('calendar')){
        $(this).datepicker();
    }
});

Рабочая Скрипка

Из ваших комментариев, 

$('input').datepicker();
$('input[type=text]').each(function () {
    if ($(this).data('calendar')) {
        $(this).datepicker();
    }
    else{
        $(this).datepicker('destroy');  //Removes the datepicker functionality 
    }
});

Обновленная Скрипка

1