trentrichardson / jQuery-Timepicker-Addon

Adds a timepicker to jQueryUI Datepicker
http://trentrichardson.com/examples/timepicker/
MIT License
2.66k stars 1.05k forks source link

jQuery validationEngine + TimePicker add-on #659

Open albertpak opened 10 years ago

albertpak commented 10 years ago

We are using this timepicker add-on and jQuery validationEngine - two fields where time is populated, i have validationEngine attached to them also so that the user can't submit without time.

If user slides timepicker - validation gives off an error, but if user clicks on a slider and picker jumps to the time and then user navigates to the next field, validation passes.

Any idea/suggestion/advise on how to get that validation to work on slide as it is on click?

bkwdesign commented 10 years ago

For my ASP.NET MVC 4 app, in my model, I changed it from a DateTime to a string (so that the resulting EditorFor razor helper will output a plain INPUT field). I decorate the property with a regular expression to help achieve the desired jquery unobtrusive validation experience. This gets my application working nicely before the addition of the TimePicker "icing on the cake" (and hence working nicely in case I swap out for a different time picker.. or no time picker).

For what it's worth, here's my .NET regular expression designed to help enforce the manual entry of military time in a flexible way.. [0-2][0-9]:?[0-5][0-9] *([aA][mM]|[pP][mM])

It works to validate the model server-side, as well as on the client (jquery validation). I have no idea if .NET translates it to a different syntax for JavaScript regex or not.. but.. for me it's working. It's not a perfect regexp, but my view model takes the string and turns it into a real date before assigning it back to my data-contract class that I send up to our WCF service.. so.. it gets thoroughly vetted up the chain.

Using the above regexp, users can hand enter 820 08:20 820 am 8:20 AM

but will get errors for entries like 860 8:60 8:60 AM

FWIW - this is my client side format for military.. the AM/PM is probably unconventional for military. I just kinda liked it.

        $("#DateArrivalMilitaryTime").timepicker({
            timeFormat: 'HH:mm tt'
        });