如何将 jQuery 侦听器添加到 CakePHP 时间输入？答案

【问题标题】：How to add jQuery listener to CakePHP time input?如何将 jQuery 侦听器添加到 CakePHP 时间输入？
【发布时间】：2016-05-02 21:24:01
【问题描述】：

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

对于表单的一部分，它要求用户提供日期和时间。日期部分使用 jQuery UI 日期选择器，时间部分使用 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);
}

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

【问题讨论】：

我猜你的选择器是错误的，给输入一个名称类型或 id 然后你可以用 jquery 选择它

标签： javascript jquery forms input time

【解决方案1】：

在@Roland 建议我的选择器错误后，我重写了所有字段输入，并为它们提供了 'AvDate' 和 'AvTime' 的 id 值，这是 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);
}

【讨论】：