input[type=date] polyfill

[![NPM version][npm-version]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Build Status][status-image]][status-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Twitter][twitter-follow]][twitter-url]

| ![Donate][donate-url] | Your help is appreciated. Create a PR, submit a bug or just grab me :beer: |
|-|-|

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.

VIEW DEMO

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
* placeholder attribute 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

``sh
$ npm install better-dateinput-polyfill
`

Then append the following scripts to your page:
`html

`

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 into your document . Value of content attribute is a media query where polyfill will be applied:

`html




`

Change default date presentation format


When no spicified polyfill uses browser settings to format displayed date. You can override date presentation globally with 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










`

Contributing

Download git repository and install project dependencies:
`sh
$ npm install
`

The project uses set of ES6 transpilers to compile the output file. Now use command below to start development:
`sh
$ npm run watch
`

After 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+

[npm-url]: https://www.npmjs.com/package/better-dateinput-polyfill
[npm-version]: https://img.shields.io/npm/v/better-dateinput-polyfill.svg
[npm-downloads]: https://img.shields.io/npm/dm/better-dateinput-polyfill.svg

[status-url]: https://github.com/chemerisuk/better-dateinput-polyfill/actions
[status-image]: https://github.com/chemerisuk/better-dateinput-polyfill/workflows/Node.js%20CI/badge.svg?branch=master

[coveralls-url]: https://coveralls.io/r/chemerisuk/better-dateinput-polyfill
[coveralls-image]: http://img.shields.io/coveralls/chemerisuk/better-dateinput-polyfill/master.svg

[twitter-url]: https://twitter.com/chemerisuk
[twitter-follow]: https://img.shields.io/twitter/follow/chemerisuk.svg?style=social&label=Follow%20me

[donate-url]: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UZ4SLQP8S4UUG&source=url