Как добавить слушателя jQuery к вводу времени CakePHP?

Question

Я использовал CakePHP 2.x для разработки веб-приложения, которое имеет простую форму, которая отправляет запрос электронной почты в почтовый ящик.

Для части формы она запрашивает у пользователя дату и время. Часть даты использует jQuery UI datepicker, а часть времени использует вспомогательный тип формы CakePHP.

Я хочу иметь возможность выполнять проверки содержимого, введенного, когда пользователь изменяет значения полей ввода с помощью javascript/jQuery. Он отлично работает для даты, но я не могу добавить слушателя в поля Time ['hour'] и Time ['min'].

Вот код с точки зрения:

echo $this->Form->create('Av', array('inputDefaults' => array('div' => true))); 
echo $this->Form->input('Date', array('label' => 'Event date *')); 
echo $this->Form->input('Time', array('type' => 'time', 'label' => 'Event time *', 'timeFormat' => 24, 'interval' => 5)); 
echo $this->Form->end('Submit'); 

А вот Javascript я работал на:

$(function() { 
    $('#AvDate').datepicker({ 
     dateFormat: "dd MM yy", 
     minDate: new Date(), 
     maxDate: "+1y", 
     autoSize: true, 
     firstDate: 1 
    }); 

    $('#AvDate').change(function() { 
     checkDateDifference(); 
    }); 

    $('#AvTimeHour').change(function() { 
     checkDateDifference(); 
    }); 

    $('#AvTimeMinute').change(function() { 
     checkDateDifference(); 
    }); 
}); 

function checkDateDifference() { 
    var date = $('#AvDate').val(); 
    var hour = $('#AvTimeMinute').val(); 

    console.log(hour); 
} 

Кто-нибудь есть какие-либо советы/предложения, которые могли бы помочь мне достичь желаемая функциональность?

Answer 1

После того, как @Roland предположил, что мои селекторы ошибаются, я переписал все полевые вводы и дал им значения id «AvDate» и «AvTime», которые CakePHP по умолчанию им по умолчанию, и это вызвало минутный ввод для «AvTime ', чтобы перейти от «AvTimeMin» к «AvTimeMinute». После настройки javascript/jQuery, чтобы принять во внимание изменение, он начал работать.

Вот обновленный код для тех, кто заинтересован:

echo $this->Form->create('Av', array('inputDefaults' => array('div' => true))); 
echo $this->Form->input('Date', array('label' => 'Event date *', 'id' => 'AvDate')); 
echo $this->Form->input('Time', array('type' => 'time', 'label' => 'Event time *', 'timeFormat' => 24, 'interval' => 5, 'id' => 'AvTime')); 
echo $this->Form->end('Submit'); 

И JavaScript:

$(function() { 
    $('#AvDate').datepicker({ 
     dateFormat: "dd MM yy", 
     minDate: new Date(), 
     maxDate: "+1y", 
     autoSize: true, 
     firstDate: 1 
    }); 

    $('#AvDate').change(function() { 
     checkDateDifference(); 
    }); 

    $('#AvTimeHour').change(function() { 
     checkDateDifference(); 
    }); 

    $('#AvTimeMinute').change(function() { 
     checkDateDifference(); 
    }); 
}); 

function checkDateDifference() { 
    var date = $('#AvDate').val(); 
    var hour = $('#AvTimeHour').val(); 
    var minute = $('#AvTimeMinute').val(); 

    console.log(date + ' ' + hour + ':' + minute); 
}