Проверьте, есть ли у элемента средство выбора даты jQuery

У меня есть форма с множеством элементов ввода. Некоторые из них представляют собой поля даты с уже прикрепленным средством выбора даты пользовательского интерфейса jQuery:

$("#someElement").mask("9?9/99/9999").datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' });

Затем у меня есть ключевая команда, связанная с этой функцией:

function openCalendar() {
    var selection = document.activeElement;

    // { Need to test here if datepicker has already been initialized 
        $(selection).datepicker("show");
    // }
}

Это отлично работает для элементов, на которых уже есть средство выбора даты. Однако любые другие поля вызовут ошибку javascript. Мне интересно, как лучше всего проверить, был ли уже инициализирован datepicker в этом поле.


javascript datepicker jquery jquery-ui
person macca1    schedule 05.04.2010    source источник

Ответы (6)


arrow_upward
72
arrow_downward

Вау, не могу поверить, что пропустил это. Строка 108 файла ui.datepicker.js:

/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: 'hasDatepicker',

Так что мне просто нужно проверить на hasClass('hasDatepicker'). Это кажется самым простым способом. Кроме того, этот оператор проверяет, открыт ли в настоящее время указатель даты (для всех, кто заинтересован):

if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") {
    // datepicker is open. you need the second condition because it starts off as visible but empty
}
person macca1    schedule 05.04.2010
comment
Чтобы проверить, инициализировано ли автозаполнение пользовательского интерфейса jQuery, я использовал это: $('#myinput').is(':data(autocomplete)'). Я предполагаю, что это также работает для datepicker. - person stephen.hanson; 25.08.2012
comment
Тот факт, что класс маркера существует, не всегда означает, что средство выбора даты находится на узле. В Datatables, когда он переходит к представлению карты, средство выбора даты удаляется из узла, но класс остается! Поэтому вам нужно добавить дополнительную проверку, как указано выше, И удалить класс, если вам нужно выполнить повторную привязку, поскольку средство выбора даты внутренне использует класс в качестве прокси для предотвращения множественных привязок. - person Jeff; 29.10.2015

arrow_upward
14
arrow_downward

1) Если код выдает ошибку при попытке открыть средство выбора даты, вы можете поместить код в try..catch

2) Вы можете установить некоторые данные в поле ввода при инициализации средства выбора даты

$("#someElement").data("datepicker-initialized", true);

3) Вы можете использовать данные, хранящиеся в плагине datepicker.

if($("#someElement").data("datepicker") != null){
   // datepicker initialized
}

or

if($.data($('#someElement').get(0), 'datepicker')){
   // datepicker initialized
}

4) datepicker внутренне использует функцию _getInst

if($.datepicker._getInst($('#someElement')[0]) != null){}

метод работает почти так же, как в примере 3.

Лучшего решения не нашел.

person Rafael    schedule 05.04.2010
comment
Спасибо! Это мне очень помогло. - person Diego Castro; 02.10.2015
comment
if($("#someElement").data("datepicker") !== null) не совсем верно, так как data() возвращает undefined, а не null. Однако менее строгое сравнение != работает. - person Jonathan Lidbeck; 06.07.2016
comment
Я проверил jQuery 1.5, последний выпуск которого был выпущен в апреле 2010 года, чтобы убедиться, что он возвращает undefined или null. Он вернул undefined. Я обновил свой ответ. Спасибо за комментарий. - person Rafael; 06.07.2016

arrow_upward
1
arrow_downward

Одним из основных решений является установка атрибута во время вложения средства выбора даты, а затем его проверка:

$("#someElement").mask("9?9/99/9999")
.datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' })
.attr("data-calendar", "true");

Тогда вы можете сделать:

if ($(selection).attr("data-calendar") == "true")
    $(selection).datepicker("show");

Есть ли более прямой путь?

person macca1    schedule 05.04.2010
comment
Мне нравится этот подход, но я бы использовал addClass("data-calendar"), что позволило бы вам использовать простой селектор вроде этого: $(".data-calendar").datepicker("show");. - person Travis; 05.04.2010

arrow_upward
0
arrow_downward

У меня другой случай. Мой скрипт копирует последние элементы таблицы, включая datepicker.

jquery не будет работать, потому что скопированный элемент имеет отметку «hasDatepicker».

Чтобы активировать средство выбора даты в новом элементе, удалите это имя класса и инициируйте его, как здесь.

 $("#yournewelementid").attr("class","your-class-name"); 
 $("#yournewelementid").datepicker();
person Ahmad    schedule 30.07.2012

arrow_upward
0
arrow_downward

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

    // If already initialized        
    if ( typeof selection !== 'undefined' && selection.length > 0)
         $(selection).datepicker('show');
    // otherwise initialize first and show
    else 
         $(selection).datepicker().datepicker('show');
person Zhelyo Hristov    schedule 23.01.2019
comment
Пожалуйста, не просто указывайте кусок кода в ответе. Дайте некоторый контекст и объясните, почему вы думаете, что это решает проблему. Идея состоит в том, чтобы создать свод вопросов и ответов, который поможет этим конкретным людям и другим в будущем получить полезную информацию. - person ; 24.01.2019

arrow_upward
-2
arrow_downward

Это было мое решение :)

if(typeof jQuery.fn.datepicker !== "undefined")
person miguelmpn    schedule 04.06.2015
comment
Это тест, если в текущем окне доступен указатель даты, а не на входе. - person Gh61; 04.07.2016