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 the 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
- US variant for days of week is supported (use
<html lang="en-US">) - keyboard and accessibility friendly
$ npm install better-dateinput-polyfill better-dom@latestThen append the following scripts to your page:
<script src="node_modules/better-dom/dist/better-dom.js"></script>
<script src="node_modules/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">Version 3 uses Intl methods to format presented date value according to the current page locale. You can customize it by specifying data-format attribute with options for the Date#toLocaleString call as a stringified JSON object:
<input type="date" data-format='{"month":"short","year":"numeric","day":"numeric"}'>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
- Firefox
- Opera
- Edge
- Internet Explorer 10+
- iOS Safari 7+
- Chrome for Android 30+