Question

我有一个ASP.NET页面，用户需要在这个页面上选择TimeSlot，如太平洋标准时间上午10点，太平洋标准时间上午10点15分......等等，间隔为15分钟（灵活）。

使用JQuery datepicker，我们只能选择日期。

我想知道是否还有适用于Timeslots的JQuery插件？

感谢您的回复。

Answer 1

jquery-timepicker很不错 - 我在最近的一个项目中使用了这个插件。

Answer 2

JQuery UI也非常好。

作为额外的奖励，您可以获得您网站的自定义主题。然后，所有UI的组件都具有相同的外观。

Direct link to DataPicker control

Answer 3

简单易用的是使用jQuery Time Picker

但是我遇到了jQuery Validator和jQuery TimePicker的兼容性问题，希望你不要同时使用它们。

但如果你这样做，我使用了另一个强制用户输入maskered输入的插件

Masked Input jQuery Plugin

实际上我更喜欢这个，因为你可以继续填写表格，而不必将手移到鼠标上，从菜单中选择所需的时间。

我用这个自定义规则验证了jQuery中的时间

// custom rule for time fields
jQuery.validator.addMethod("time", function(value, element) {
    var hh = value.toString().substring(0, 2);
    var mm = value.toString().substr(3, 2);
    return this.optional(element) || ((parseFloat(hh) > 0 && parseFloat(hh) <= 12) && (parseFloat(mm) > 0 && parseFloat(mm) <= 59));
}, "Please enter a valid time");

编辑：添加圆形方法以获得00,15,30,45分钟

$(".time").blur(function() {
    var value = $(this).val();
    var hh = value.toString().substring(0, 2)
    var mm = parseFloat(value.toString().substr(3, 2));

    if (mm > 0 && mm <= 15) { $(this).val(hh+":15"); return; }
    if (mm > 15 && mm <= 30) { $(this).val(hh+":30"); return; }
    if (mm > 30 && mm <= 59) { $(this).val(hh+":45"); return; }

   $(this).val(hh+":45"); // if 00
});

任何可用于在ASP.NET MVC页面上选择时间的JQuery时间插件？

3 个答案: