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 (Flex开发者_如何学Cible).
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.
jquery-timepicker is decent - I used this plugin on a recent project.
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
- 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
});
精彩评论