JQueryUI中时间微调器的更改事件是什么?

时间:2013-06-27 05:01:11

标签: javascript jquery-ui time

我试图让JQueryUI example page的时间微调器在更改时更新div。我可以制作一个标准的微调器工作,但我无法弄清楚如何从微调器的修改时间版本访问该事件。

这里有一个(不是)工作小提琴:http://jsfiddle.net/r5GYD/

$(document).ready(function () {
    //I need this to be more widely available so it's declared out here
    var time = 'time';
    //check that the JQuery call actually does what it's supposed to
    $('#time').html(time);

    $.widget("ui.timespinner", $.ui.spinner, {
        options: {
            // seconds
            step: 60 * 1000,
            // hours
            page: 60
        },

        _parse: function (value) {
            if (typeof value === "string") {
                // already a timestamp
                if (Number(value) == value) {
                    return Number(value);
                }
                return +Globalize.parseDate(value);
            }
            return value;
        },

        _format: function (value) {
            return Globalize.format(new Date(value), "t");
        }
    });

    $("#timespinner").timespinner();
    $("#timespinner").change(function () { //TODO not working :(
        time = $(this).val();
        console.log(time);
        $('#time').html(time);
    });
});

谢谢!

1 个答案:

答案 0 :(得分:2)

编辑:

好的,对,所以timespinner是一个内嵌的自定义小部件。所以选项很奇怪。在这部分代码中添加:

$.widget("ui.timespinner", $.ui.spinner, {
    options: {
        // seconds
        step: 60 * 1000,
        // hours
        page: 60,
        change: function () { 
                  time = $(this).val();
                  console.log(time);
                  $('#time').html(time);
               }
    }
    //rest of code

虽然您可能想使用“旋转”选项而不是更改选项:

$.widget("ui.timespinner", $.ui.spinner, {
    options: {
        // seconds
        step: 60 * 1000,
        // hours
        page: 60,
        spin: function () { 
                  time = $(this).val();
                  console.log(time);
                  $('#time').html(time);
               }
    }
    //rest of code