This is what I am planning for collecting a date in a form (so it works on all browsers and offers the best experience possible to the user):
(1) Use 3 drop down boxes for date, month, year etc. This will be basic and of course work on any browser.
(2) Perform a test in JavaScript where if the HTML 5 date input is supported that it converts the 3 select boxes into one date input box and uses that - if so, no further action needed.
I believe this should do that:
var datefield=document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type == "date") {
}
(3) If no HTML 5, perform check to see if the browser supports this: http://docs.jquery.com/UI/Datepicker and if so use that (and convert the select boxes into one input type=“date” field).
(4) If nothing matches then the select boxes stay as they are and will be used to select the date. Of course if JS is off then the select boxes would just stay in place too, which is perfect.
This is important as I want modern devices to have the calendar select (HTML 5 if possible) but ensure old mobiles don’t try and use the jQuery one if they can’t.
My questions:
(1) Does this sound a good idea, or is there better advice? A decent date select is very important for what I am doing.
(2) How do I detect for support of http://docs.jquery.com/UI/Datepicker (jQuery) - it lists how it supports the most modern browsers and I also know Android and Apple devices support it (even though the link doesn’t say so). Would a search for MSIE / FF / Opera / Safari do it, or is there a better way? If so, what’s the best way to detect browsers as I see many browser detect scripts but people advise against.
I think this would work well as if a device is missed the worst case scenario is the drop downs which of course will work just fine, although not as convenient as a pop-up calendar.
Thanks.