configurable-date-input-polyfill

The last date-input polyfill you will ever need. A fancy and lightweight date input with a high number of configuration options for all needs. Supports any calendar format and contains a large amount of localizations.

Just include this simple script and IE, Firefox, and OS X Safari will support <input type="date">, without any dependencies, not even jQuery!

Forked from date-input-polyfill. Continuing as a separate project.

VIEW DEMO HERE

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.

Install

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

Add to your project:

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

  or alongside 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.

<script src="configurable-date-input-polyfill.dist.js"></script>

<script src="node_modules/configurable-date-input-polyfill/configurable-date-input-polyfill.dist.js"></script>

• 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.

<!--default dont need to be specified-->
<input type="date" lang="en" />

<input type="date" lang="fr" />

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.

<!--default dont need to be specified-->
<input type="date" min="1800-01-01" max="2200-01-01"/>

<!--custom-->
<input type="date" min="2015-02-15" max="2030-01-01" />

<!--custom for non type date-->
<input type="text" class="date-polyfill" data-min="2015-02-15" data-max="2030-01-01" />

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.

<!--default dont need to be specified-->
<input type="date" date-format="yyyy-mm-dd" />

<input type="date" data-date-format="mm/dd/yyyy" />

<input type="date" data-date-format="dd.mm.yyyy" />

First day of the Week (Matrix Formatting)

• Specify the first day of the Week. With the data-first-day attribute you can change the day starting the week between Saturday, Sunday and Monday.

<!--default dont need to be specified-->
<input type="date" data-first-day="su" />

<!--europe-->
<input type="date" data-first-day="mo" />

<!--egypt-->
<input type="date" data-first-day="sa" />

Browser support

Desktop

• Chrome
• Safari
• Firefox
• Opera
• Edge
• Internet Explorer 10+

Mobile

• iOS Safari 7+
• Samsung Internet 11+

Contributing

Build

Run npm run build to edit the Project

Production

Run npm run production to do an optimization and minification to the final Project