Need Date/Time Picker with specific functions
-
29-09-2019 - |
Question
I've looked around, and I do see previous questions where people ask about Date/Time pickers; unfortunately none of those threads matched my specific needs. I see a lot of people recommending Any+Time as well, but it seems a little "heavy" and I'm looking for lightweight.
Basically, I have the need for a date/time picker for "events". The event-search picker here (http://jqueryui.com/demos/datepicker/#event-search) is very nice, but it doesn't handle time. My form is built on jQuery, so I'm okay with using that.
- Must be able to select both date and time
- End time form should be hidden until the start time is selected.
- After the start time is selected, end time should automatically be set for 6 hours later
- Should not be able to select an end time that takes place before the start time
- Should be able to handle timezones, and default to the user's current timezone
- Should be able to send out a UTC timestamp (I will store in a hidden field; ex: 1291004863)
Your recommendations are appreciated... I dont know much about Javascript.
Solution
I would try extending the jQuery UI datepicker with the modifications made on the following page: http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/
The jQuery UI event search example code would only need the new parameters added as to make it work.
Hope that helps!
Edit: Example code for datepicker range (using code from link above):
-HTML-
<p>
<label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
<label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>
-js-
$(function() {
$('.datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
Here's a link to see in action: http://bit.ly/hZTR84