Любой плагин JQuery для выбора времени на странице ASP.NET MVC?

Question

У меня есть страница ASP.NET, на которой пользователю нужно выбрать TimeSlot, например, 10:00 AM PST, 10:15 AM PST .... и т. Д. С постоянным интервалом в 15 минут (гибкий).

Используя дату выборщика JQuery, мы можем выбрать только дату.

Мне интересно, есть ли доступный плагин JQuery для Timeslots?

Цените свои ответы.

Answer 1

jquery-timepicker Порядочный - я использовал этот плагин для недавнего проекта.

Answer 2

JQuery UI имеет довольно хороший тоже.

В качестве дополнительного бонуса вы получаете пользовательскую тему для своего сайта. Тогда все компоненты пользовательского интерфейса будут иметь одинаковый внешний вид.

Direct link to DataPicker control

Answer 3

• Простая вещь использовать jQuery Time Picker

Но у меня были некоторые проблемы совместимости с JQuery валидатора и 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"); 

EDIT: добавляющих круглый методом, чтобы получить 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 
});