jQuery 时间选择器的两个实例

Question

我有两个不同的 jQuery 函数，一个是几个小时，另一个是几分钟。

$('#hour_timepicker').timepicker({
    timeFormat: 'h',
    interval: 1,
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

上面的代码运行良好。但是我的下一个功能，它必须显示分钟不起作用，

$('#minute_timepicker').timepicker({
    timeFormat: 'm',
    interval: 10,
    dynamic: true,
    dropdown: true,
    scrollbar: true
});

无论我select从minute_timepicker得到什么值，它都显示完整的随机数。

这里还有输入：

<label id="hour_timepicker_label">Slect time</label>
<input id="hour_timepicker" type="text"/>
<label>:</label>
<input id="minute_timepicker" type="text"/>

有人可以帮忙吗？谢谢。

Link 到时间选择器库: http://jonthornton.github.io/jquery-timepicker/

Answer 1

在你的第二个函数上尝试 i 而不是 m。

即

$('#minute_timepicker').timepicker({
    timeFormat: 'i',
    interval: 10,
    dynamic: true,
    dropdown: true,
    scrollbar: true
});

抱歉，如果这不起作用。

我之所以这样建议，是因为在文档中，它是这样的：

$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });

H -> hours、i -> minutes 和 s -> seconds

Answer 2

根据该库的文档，时间格式定义为：

timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax. Characters can be escaped with a preceeding double slash (e.g. H\hi). Alternatively, you can specify a function instead of a string, to use completely custom time formatting. In this case, the format function receives a Date object and is expected to return a formatted time as a string. default: 'g:ia'

分钟的 PHP 格式语法是 i

Answer 3

我认为问题是这个库并不是真正设计来单独选择分钟的，如果你必须这样做，你需要将步长设置为 60 小时（所以它只会在一小时内显示增量），然后对于分钟，您需要将其限制为仅显示任意小时，这样它就不会重复，然后将步长设置为 10，这样它将以 10 分钟的增量显示。

$('#hour_timepicker').timepicker({
    timeFormat: 'H',
    interval: 1,
    step: 60,
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

$('#minute_timepicker').timepicker({
    timeFormat: 'i',
    step: 10,
    dynamic: true,
    dropdown: true,
    scrollbar: true,
    minTime: '12:00am',
    maxTime: '12:59am'
});

<link href="https://cdn.jsdelivr.net/npm/timepicker@1.11.14/dist/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/timepicker@1.11.14/dist/jquery.timepicker.min.js"></script>


<label id="hour_timepicker_label">Slect time</label>
<input id="hour_timepicker" type="text"/>
<label>:</label>
<input id="minute_timepicker" type="text"/>

jQuery 时间选择器的两个实例

Two instances of jQuery timepicker

javascript

jquery

datetimepicker

timepicker