Использование класса для вызова средства выбора даты jQuery UI не работает

Question

Я использую jQuery UI datepicker - версия диапазона. У меня есть форма и в поле ввода (текст) «с даты» я называю DatePicker. Работает нормально.

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

<input type="text" id="fromDate" value="Enter date" name="fromDate" class="fromDatePicker"/>
<img class="fromDatePicker" src="images/calender_icon_a1.jpg" id="ci1"/>

Код JS:

$(function() {
$( ".fromDatePicker" ).datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    altFormat: 'yymmdd',
    altField: "#fromDateFormatted",
    numberOfMonths: 2,
    onSelect: function( selectedDate ) {
        $('#toDate').datepicker( "option", "minDate", selectedDate );
    }
});

Answer 1

Очевидно, вы не можете привязать средство выбора даты к изображению.Если мы посмотрим на источник datepicker, то увидим, что :

if (nodeName == 'input') {
    this._connectDatepicker(target, inst);
} else if (inline) {
    this._inlineDatepicker(target, inst);
}

и inline истинно, если и только если nodeName равно div или span.Поэтому, когда вы пытаетесь привязать указатель даты к <img>, вы игнорируетесь без предупреждения в консоли.

Если вы посмотрите на пример Icon Trigger на Страница демонстраций jQuery-UI , вы увидите одобренный способ активации средства выбора даты с помощью значка:

$('.fromDatePicker').datepicker({
    // existing options
    showOn: "both",
    buttonImage: "images/calendar_icon_a1.jpg", 
    buttonImageOnly: true
});

, а затем полностью удалите элемент img.fromDatePicker.