[WSG] HTML5 input type=date / and you
Hi all,
I just got a little burned by Chrome's new date popup for HTML date-type
inputs!
*Why?*
- Because when I wrote the original code, I hadn't read up on the new
properties being added to HTML5 input types
- Because I was using a js-based datepicker plugin to implement the same
functionality and wasn't feature-detecting native date handling (except for
mobile devices)
- Because my JS expects a particular date format, and could only handle
Australian dd/mm/ or ISO8601-compliant date strings. This wasn't an
issue before, because my JS datepicker controlled the format.
*How do I avoid making the same mistake?*
HTML5 implements a new property for input types that deal with date or time
values:
element.valueAsDate
This property is designed to solve your locale woes, and it is also an easy
way to feature-detect a browser's native support for the date input type. I
haven't gone through all current browsers yet, so if you do use this
method, make sure to check that none of your browsers support the property
without implementing a date picker.
.valueAsDate, as you might have guessed, returns the input's value as
a Dateobject. Here's a super-simple feature detect:
if ( !myElement.valueAsDate ) {
// Implement my JavaScript datepicker
}
*The result*
Better usability! (and more robust date handling).
*For your convenience*
I have created a jsFiddle you can run on any browser to test the feature
detection: http://jsfiddle.net/h9jYB/5/
- Opera 12: *Pass *(valueAsDate handling, datepicker present)
- Chrome 20: *Pass *(valueAsDate handling, datepicker present)
- Firefox 12: *Pass *(no valueAsDate handling, no datepicker)
- IE8, IE9: *Pass *(no valueAsDate handling, no datepicker)
- James
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] HTML5 input type=date / and you
On 02/07/2012 01:55, James Ducker wrote:
element.valueAsDate
This property is designed to solve your locale woes, and it is also an
easy way to feature-detect a browser's native support for the date input
type. I haven't gone through all current browsers yet, so if you do use
this method, make sure to check that none of your browsers support the
property without implementing a date picker.
.valueAsDate, as you might have guessed, returns the input's value as a
Date object. Here's a super-simple feature detect:
if ( !myElement.valueAsDate ) {
// Implement my JavaScript datepicker
}
You can also simply test if the type of your input is reported as
date. Older browsers that don't implement the new HTML5 types simply
fall back to changing them - in the DOM itself - to type=text
if (!myElement.type === text) {
// fallback
}
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] HTML5 input type=date / and you
The only issue I've found so far is that Safari's implementation of the
date type sucks. It gives you little up/down chevrons which add or subtract
one day at a time. So my working code also treats Safari as
datepicker-not-implemented.
For me, as I make use of the valueAsDate property when it's available, it
made more sense to check its existence directly.
Also, Chrome's date picker is pretty annoying when you're trying to enter
DOBs. As far as I can see there's no quick way to jump forward/backward by
decades at a time.
On 2 July 2012 11:11, Patrick H. Lauke re...@splintered.co.uk wrote:
On 02/07/2012 01:55, James Ducker wrote:
element.valueAsDate
This property is designed to solve your locale woes, and it is also an
easy way to feature-detect a browser's native support for the date input
type. I haven't gone through all current browsers yet, so if you do use
this method, make sure to check that none of your browsers support the
property without implementing a date picker.
.valueAsDate, as you might have guessed, returns the input's value as a
Date object. Here's a super-simple feature detect:
if ( !myElement.valueAsDate ) {
// Implement my JavaScript datepicker
}
You can also simply test if the type of your input is reported as
date. Older browsers that don't implement the new HTML5 types simply fall
back to changing them - in the DOM itself - to type=text
if (!myElement.type === text) {
// fallback
}
--
Patrick H. Lauke
__**__**__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com |
http://flickr.com/photos/**redux/http://flickr.com/photos/redux/
__**__**__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__**__**__
***
List Guidelines:
http://webstandardsgroup.org/**mail/guidelines.cfmhttp://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe:
http://webstandardsgroup.org/**join/unsubscribe.cfmhttp://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberhelp@webstandardsgroup.**orgmemberh...@webstandardsgroup.org
***
--
*James Ducker*
james.duc...@gmail.com
+61 404 838 470
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] which tag to use for link to reference?
Thanks David. I think ePub3 and HTML5 support is still not here. When converting the HTML5 doctype files to ePub, Sigil (an ePub editor) forces ePub2 version and stripped all HTML5 tags. Converting to mobil format for Amazon Kindle is even worse, I feel as if dealing with the IE6 7. Tee On Jun 30, 2012, at 3:16 AM, David Dorward wrote: On 30 Jun 2012, at 11:04, tee wrote: I thought maybe I can use hyperlink for monolithic instead of adding 3 (which will be directed to Appendix), but this often is not desirable because in other sections of paragraphs where citations are used, there aren't alway clear sentences to hyperlink. A hyperlink (to an aside) is the closest thing HTML has AFAIK. This is for an ebook project, it's different from the webpage, and the readers are more accustom to the footnotes, but footnote doesn't work for ebook format, because devices' sizes vary, and portrait vs landscape view affects text flow too so strictly speaking there isn't pagination. The example syntax given in the EPUB specification[1] is: html … xmlns:epub=http://www.idpf.org/2007/ops; … p … a epub:type=noteref href=#n11/a … /p … aside epub:type=footnote id=n1 … /aside … /html [1] http://idpf.org/epub -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] which tag to use for link to reference?
These e-mails aren't intended for me, but I keep on receiving them. Ted Knoy On Mon, Jul 2, 2012 at 10:52 AM, tee weblis...@gmail.com wrote: Thanks David. I think ePub3 and HTML5 support is still not here. When converting the HTML5 doctype files to ePub, Sigil (an ePub editor) forces ePub2 version and stripped all HTML5 tags. Converting to mobil format for Amazon Kindle is even worse, I feel as if dealing with the IE6 7. Tee On Jun 30, 2012, at 3:16 AM, David Dorward wrote: On 30 Jun 2012, at 11:04, tee wrote: I thought maybe I can use hyperlink for monolithic instead of adding 3 (which will be directed to Appendix), but this often is not desirable because in other sections of paragraphs where citations are used, there aren't alway clear sentences to hyperlink. A hyperlink (to an aside) is the closest thing HTML has AFAIK. This is for an ebook project, it's different from the webpage, and the readers are more accustom to the footnotes, but footnote doesn't work for ebook format, because devices' sizes vary, and portrait vs landscape view affects text flow too so strictly speaking there isn't pagination. The example syntax given in the EPUB specification[1] is: html … xmlns:epub=http://www.idpf.org/2007/ops; … p … a epub:type=noteref href=#n11/a … /p … aside epub:type=footnote id=n1 … /aside … /html [1] http://idpf.org/epub -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] HTML5 input type=date / and you
These e-mails aren't intended for me, but I keep receiving them.
Ted Knoy
On Mon, Jul 2, 2012 at 9:57 AM, James Ducker james.duc...@gmail.com wrote:
The only issue I've found so far is that Safari's implementation of the
date type sucks. It gives you little up/down chevrons which add or subtract
one day at a time. So my working code also treats Safari as
datepicker-not-implemented.
For me, as I make use of the valueAsDate property when it's available, it
made more sense to check its existence directly.
Also, Chrome's date picker is pretty annoying when you're trying to enter
DOBs. As far as I can see there's no quick way to jump forward/backward by
decades at a time.
On 2 July 2012 11:11, Patrick H. Lauke re...@splintered.co.uk wrote:
On 02/07/2012 01:55, James Ducker wrote:
element.valueAsDate
This property is designed to solve your locale woes, and it is also an
easy way to feature-detect a browser's native support for the date input
type. I haven't gone through all current browsers yet, so if you do use
this method, make sure to check that none of your browsers support the
property without implementing a date picker.
.valueAsDate, as you might have guessed, returns the input's value as a
Date object. Here's a super-simple feature detect:
if ( !myElement.valueAsDate ) {
// Implement my JavaScript datepicker
}
You can also simply test if the type of your input is reported as
date. Older browsers that don't implement the new HTML5 types simply fall
back to changing them - in the DOM itself - to type=text
if (!myElement.type === text) {
// fallback
}
--
Patrick H. Lauke
__**__**__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com |
http://flickr.com/photos/**redux/http://flickr.com/photos/redux/
__**__**__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__**__**__
***
List Guidelines:
http://webstandardsgroup.org/**mail/guidelines.cfmhttp://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe:
http://webstandardsgroup.org/**join/unsubscribe.cfmhttp://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberhelp@webstandardsgroup.**orgmemberh...@webstandardsgroup.org
***
--
*James Ducker*
james.duc...@gmail.com
+61 404 838 470
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
