input[type=date]
polyfill for better-dom
Why another date picker? The problem is that most of existing solutions do not follow standards regarding to value
property format, that should have โa valid full-date as defined in [RFC 3339]โ. In other words representation of date can vary, but the string value should have yyyy-MM-dd
format. It helps to work with such values consistently regarding on the current language.
- normalizes
input[type=date]
presentation for desktop browsers - skips mobile browsers, they have good UI widget and correct
value
format - submitted value always has
yyyy-MM-dd
[RFC 3339] format - live extension - works for current and future content
placeholder
attribute works as expected in browsers that support it- fully customizable date picker, including date format displayed to the user
- keyboard and accessibility support
- full i18n support (if your language is missed - just translate strings from
i18n
folder and include a new file in your project) - US variant for days of week is supported (use
<html lang="en-US">
)
The simplest way is to use bower:
$ bower install better-dateinput-polyfill
This will clone the latest version of the better-dateinput-polyfill with dependencies into the bower_components
directory at the root of your project.
Then append the following script on your page:
<script src="bower_components/better-dom/dist/better-dom.js"></script>
<script src="bower_components/better-i18n-plugin/dist/better-i18n-plugin.js"></script>
<script src="bower_components/better-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>
Displayed date can be formatted using a data-format
attribute on the <input type="date">
. For example:
<input type="date" data-format="EE, MMMM dd'th' yyyy">
This will display the selected date like "Monday, December 8th 2014" on the input.
If data-format
is not specified, date is formatted using the pattern "E, dd MMM yyyy".
Possible parameters for the format are:
Letter | Date Component | Presentation | Examples |
---|---|---|---|
y | Year | Year | 2002; 02; 2 |
M | Month in year | Month | July; Jul; 07; 7 |
w | Week in year | Number | 07; 7 |
W | Week in month | Number | 2 |
D | Day in year | Number | 009; 9 |
d | Day in month | Number | 08; 8 |
F | Day of week in month (1st, 2nd, 3rd Tuesday) | Number | 2 |
E | Day name in week | Text | Tuesday; Tu. |
u | Day number of week (1 = Monday, ..., 7 = Sunday) | Number | 1 |
Number of letters in the parameter name specifies form of the output value, for instance:
"M" yields "1"
"MM" yields "01"
"MMM" yields "Jan"
"MMMM" yields "January"
- Chrome
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- Internet Explorer 8+ (see notes)
- iOS Safari 6+
- Android 2.3+
- Chrome for Android