input[type=date] polyfill
 |
Your help is appreciated. Create a PR, submit a bug or just grab me |
|---|
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
- lightweight polyfill with no dependencies
- works for initial and dynamic content elements
- normalizes
input[type=date]presentation for desktop browsers - submitted value always has standards based
yyyy-MM-dd[RFC 3339] format placeholderattribute works as expected- it's possible to change displayed date value format
- you are able to control where to apply the polyfill
- keyboard and accessibility friendly
Installation
$ npm install better-dateinput-polyfillThen append the following scripts to your page:
<script src="node_modules/better-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>Forcing the polyfill
Sometimes it's useful to override browser implemetation with the consistent control implemented by the polyfill. To suppress feature detection you can add <meta name="dateinput-polyfill-media"> into your document <head>. Value of content attribute is a media query where polyfill will be applied:
<!-- force polyfill everywhere -->
<meta name="dateinput-polyfill-media" content="screen">
<!-- force polyfill only on mobile devices in portrait mode-->
<meta name="dateinput-polyfill-media" content="screen and (orientation: portrait)">Change default date presentation format
When no spicified polyfill uses browser settings to format displayed date. You can override date presentation globally with <meta name="dateinput-polyfill-format"> via content attribute or directly on a HTML element with data-format attribute. Value should be options for the Date#toLocaleString call as a stringified JSON object:
<html>
<head>
<!-- Override default date presentation format -->
<meta name="dateinput-polyfill-format" content='{"month":"long","year":"numeric","day":"numeric"}'>
</head>
<body>
<!-- Override date presentation format on a particular element -->
<input type="date" data-format='{"month":"short","year":"numeric","day":"numeric"}'>
</body>
</html>Contributing
Download git repository and install project dependencies:
$ npm installThe project uses set of ES6 transpilers to compile the output file. Now use command below to start development:
$ npm run watchAfter any change file build/better-dateinput-polyfill.js is recompiled automatically.
Browser support
Desktop
- Chrome
- Safari
- Firefox
- Opera
- Edge
- Internet Explorer 10+
Mobile
- iOS Safari 10+
- Chrome for Android 70+