better-dateinput-polyfill
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.
Features
- normalizes
input[type=date]presentation for desktop browsers - skips mobile browsers, they have good UI widget and correct
valueformat - submitted value always has
yyyy-MM-dd[RFC 3339] format - live extension - works for current and future content
placeholderattribute 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
i18nfolder and include a new file in your project) - US variant for days of week is supported (use
<html lang="en-US">)
Installation
The simplest way is to use bower:
$ bower install better-dateinput-polyfillThis 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:
Custom formats
Displayed date can be formatted using a data-format attribute on the <input type="date">. For example:
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"
Forcing the polyfill
Sometimes it's useful to override browser implemetation with the consistent control implemented by the polyfill. In order to suppress feature detection you can use the data-native attribute. Possible values are desktop and mobile. They allow to limit type of devices where you want to see a native control.
For example, the code below defines a dateinput that uses a native implementation on mobile phones, but ALL desktop browsers (even Chrome desktop) will have a consistent widget created by the polyfill.
Contributing
In order to modify the source code you have to install gulp globally:
$ npm install -g gulpNow you can download project dependencies:
$ npm installThe project uses set of ES6 transpilers to compile the output file. You can use command below to start development:
$ npm startAfter any change it recompiles build/better-dateinput-polyfill.js and runs unit tests automatically.
Browser support
Desktop
- Chrome
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- Internet Explorer 8+ (see notes)
Mobile
- iOS Safari 6+
- Android 2.3+
- Chrome for Android