datepicker - onВыбрать событие не запускается при инициализации через объект datepicker

Question

Я пытаюсь запустить событие onSelect, как показано ниже, но он не работает.

Мне нужно использовать объект datepicker в соответствии с моим дизайном приложения.

var datePickerObject = $('#datepicker').datepicker(); 
 

 
datePickerObject.datepicker(
 
    { 
 
    onSelect: function(dateText, inst) { alert("Working"); } 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<input type="text" id="datepicker"/> //Updated as per Oscar jar suggestion

Любое предложение будет весьма признателен.

Answer 1

Поправьте меня, если ошибаюсь, но я думаю, что вы делаете неправильно, что ваш datepicker компонент получать инициализируется два раза при вызове метода datepicker(...) впервые при создании datePickerObject, а затем снова при добавлении других конфигураций (как ваш onSelect функция) к object, который уже был инициализирован (возможно, поэтому он не работает, и ваша функция игнорируется, так как она добавляется во второй раз).

Так что, если вы не делать этого, и вы только инициализировать компонент за один раз и использовать конфигурации, необходимые (пример снизу) тогда вы получите его работы:

var cfg = {}, 
 
    cmp = $('#datepicker'); 
 

 
// Add event handlers 
 
cfg.onSelect = onDateSelect; 
 

 
// Add other configs 
 
cfg.changeMonth = true; 
 
cfg.changeYear = true; 
 
cfg.dateFormat = 'dd-mm-yy'; 
 

 
// Initialize component 
 
cmp.datepicker(cfg); 
 

 
function onDateSelect(date, cmp) { 
 
    console.log('Selected date is: %o', date); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<div id="datepicker"></div>

---

с другой стороны, мне интересно, почему у вас есть следующие в вашем фрагменте кода:

<div type="text" id="datepicker"></div> 

(Поскольку атрибут type не является частью div элемента)

Если это то, что вам нужно, то добавить input для datepicker компонента, например:

<input type="text" id="datepicker"/> 

---

ОБНОВЛЕНИЕ:

Я проверил ваш код и передается обработчик события при инициализации компонента только в первый раз, и она работает:.

var datePickerObject = $('#datepicker').datepicker({ 
    onSelect: function(dateText, inst) { 
    alert('Working'); 
    } 
});