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

无论我从minute_timepicker，中选择了什么值，它都显示完全随机数。

以下也是输入：

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

有人能帮忙吗？谢谢。

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

Answer 1

我认为问题在于，这个库实际上并不是为了单独选择分钟，如果必须这样做，您需要将步骤设置为每小时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"/>

​

Answer 2

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

i.e

$('#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 3

根据该库的文档，timeFormat被定义为：

如何在列表和输入元素中显示时间。使用PHP的date()格式化语法。字符可以用前面的双斜杠(例如H\hi)转义。或者，您可以指定函数而不是字符串，以使用完全自定义的时间格式设置。在这种情况下，format函数将接收Date对象，并期望将格式化时间作为字符串返回。默认值:G:ia

分钟的PHP格式语法是i。