Features

* Easily Stylable. These are the default styles,
which you may override with your own.
* Accessibility friendly with Keyboard Shortcuts. Full arrow controls Up/Down/Left/Right to increment/decrement the selected date.
Esc to hide the datepicker.
* Easy Localization. Specify the datepicker's locale by setting the
lang attribute of the input element. The Localisation is easy to extend with own items.
* Limit the range to choose from by setting the min and max attributes.
* Configure display format at will. Specify the display format by setting either the
date-format or data-date-format attribute of the input element.
* Configure the first day of the week. By setting the data-first-day attribute you
can set the calendar matrix format to any standard. Value of this attribute can be sa,su or mo.
* Polyfill can be added with class date-polyfill.
* Polyfill works with valueAsDate and valueAsNumber.
Learn more about these properties.
They behave as getters and setters.
* Change detection of input attributes via MutationObserver
always keeps the datepicker up to date.
* Ensure a consistent look and feel for date inputs across all browsers by forcing the use of the polyfill.

Install

npm install --save configurable-date-input-polyfill

Add to your project:

* Webpack/Browserify: require('configurable-date-input-polyfill');

* Babel: import 'configurable-date-input-polyfill';

* Script Tag: Copy configurable-date-input-polyfill.dist.js from node_modules and
include it anywhere in your HTML.
``html



`


* This package supports AMD.

Localization

* You can easily set a specific locale for each date input. The list of available languages can easily be extended by your own.
`html




`

Min and Max

* By setting the min and max attributes you can change the range of available date options. In case you are faced with an input without type date, it is recommended to use data-min and data-max.
`html








`

Formatting

* You can easily specify the display format by setting either the
date-format or data-date-format attribute of the input element. The default format is yyyy-mm-dd.
Available options list.
`html






`

First day of the Week (Matrix Formatting)

* Specify the first day of the week. You can use the data-first-day attribute to change the day the week starts between Saturday, Sunday, and Monday.
`html








`

Force Polyfill

* Ensure a consistent date input experience across all browsers by forcing the use of the polyfill.
To do this you have to add data-force-polyfill="true" to an specific date input element.

`html








`

Browser support

#### Desktop
* Chrome
* Safari
* Firefox
* Opera
* Edge
* Internet Explorer 10+

#### Mobile
* iOS Safari 7+
* Samsung Internet 11+

---

Contributing

Feel free to contribute. Whether it's a feature request or a pull request, any type of contribution is welcome.

$3

* To start modifying the project, you will need to run npm install in the package folder.
* After modifying the project files, you will need to run npm run build to apply your changes.
* It is recommended to use npm run watch when making large changes.

$3

* When your changes are ready to be used in production, you need to run npm run production`.
* After that, the modified package is ready for use. Pull Requests of any kind are strongly encouraged!