StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<ul> <li>The easy thing is to use <a href="http://code.google.com/p/jquery-timepicker/" rel="nofollow noreferrer">jQuery Time Picker</a></li> </ul> <p>But I had some compatibility issues with jQuery Validator and jQuery TimePicker, hope you are not using both.</p> <p>But if you do, i used this other plugin that forces the user to enter a maskered input</p> <ul> <li><a href="http://digitalbush.com/projects/masked-input-plugin/" rel="nofollow noreferrer">Masked Input jQuery Plugin</a></li> </ul> <p>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.</p> <p>and I validated the time in jQuery with this custom rule</p> <pre><code>// 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"); </code></pre> <p><strong>EDIT:</strong> adding the round method to get 00, 15, 30, 45 minutes</p> <pre><code>$(".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 }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload