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 - 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 displayed value format via
data-formatattribute - control when to apply the polyfill using data-polyfill attribute
- full i18n support (localized files located at better-time-element)
- US variant for days of week is supported (use
<html lang="en-US">) -
- keyboard and accessibility friendly
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:
<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-time-element/dist/better-time-element.js"></script>
<script src="bower_components/better-emmet-plugin/dist/better-emmet-plugin.js"></script>
<script src="bower_components/better-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>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-polyfill attribute. Possible values are desktop, mobile, all, none. They allow to limit type of devices where you want to see the native control.
<!-- force polyfill only on mobile devices -->
<input type="date" data-polyfill="mobile">
<!-- force polyfill on any device -->
<input type="date" data-polyfill="all">
<!-- does not polyfill anywhere -->
<input type="date" data-polyfill="none">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.
- Chrome
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- Internet Explorer 8+ (see notes)
- iOS Safari 6+
- Android 2.3+
- Chrome for Android