Start and End time using jquery

Question

I need to enter the start date, start time, end date and end time in my asp.net MVC application. date fields are textbox and time fields are dropdown.

How can i fill the time dropdowns using jquery.?

Also i need to restrict the user to select the invalid time periods. For ex.: when the user selects 9:00 AM in start time dropdown, the end time should not be 08:00 AM of the same day. i.e. the user should not select the end time lesser than start time.

Answer 1

For picking dates you can try to use Date Range picker

Answer 2

You could use just textboxes for the time input and combine that with the jQuery Mask plugin (ie; "99:99") and a custom regex validator using this jQuery Validator plugin. The custom validator would not only ensure that the value given for the times are valid times but that the ending time is greater than the beginning time (if your using 24 hour its much easier).