Any JQuery time plugin available to select Time on ASP.NET MVC Page?

Question

Hi

I have an ASP.NET Page on which the user need to select the TimeSlot like 10:00 AM PST, 10:15 AM PST.... etc at a constant interval of 15 Min (Flexible).

Using the JQuery datepicker, we can only select the date.

I am wondering if there is any readily JQuery plugin available for Timeslots as well?

Appreciate your responses.

Answer 1

jquery-timepicker is decent - I used this plugin on a recent project.

Answer 2

JQuery UI has a pretty good one too.

As an added bonus you get a custom theme for your website. Then all of UI's components will have the same look and feel.

Direct link to DataPicker control

Answer 3

• The easy thing is to use jQuery Time Picker

But I had some compatibility issues with jQuery Validator and jQuery TimePicker, hope you are not using both.

But if you do, i used this other plugin that forces the user to enter a maskered input

• Masked Input jQuery Plugin

in fact i prefer this one, because you can continue filling the form without having to move your hand to the mouse to pick the desired time from a menu.

and I validated the time in jQuery with this custom rule

// 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: adding the round method to get 00, 15, 30, 45 minutes

$(".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
});