如何将 jQuery 侦听器添加到 CakePHP 时间输入中

How to add jQuery listener to CakePHP time input?

本文关键字：CakePHP 时间 输入 添加 jQuery 侦听器      更新时间：2023-09-26

我一直在使用CakePHP 2.x开发一个Web应用程序，该应用程序具有一个简单的表单，可以向邮箱发送电子邮件请求。

对于表单的一部分，它要求用户提供日期和时间。日期部分使用 jQuery UI 日期选择器，时间部分使用 CakePHP 的表单帮助程序类型时间。

我希望能够在用户使用 javascript/jQuery 更改输入字段的值时对输入的内容执行检查。它适用于日期，但我似乎无法将侦听器添加到时间['小时']和时间['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);
}

有没有人有任何提示/建议可以帮助我实现所需的功能？

在@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);
}
相关文章：