Question

你能帮我创建一个时间微调器，如下所示：

-0：00 +

和+是按钮，值在文本框0:00中。值应以15分钟的块增加，即0:15; 0:30。

如何制作此类功能。

由于

Answer 1

from jquery UI

DEMO HERE

HTML

<div id="inputs">
    <form>
        <div id="when">
            <input id="timespinner" name="timespinner" value="00:00 AM" />
        </div>
    </form>
</div>
<div id="time"></div>

JS

//Trying to get the time div to update when the time is changed
//code is only minimally changed from the JQuery UI demo page here:
//http://jqueryui.com/spinner/#time

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

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

        _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);
    });
});

I good package here

在Javascript中创建时间微调器

1 个答案: