nodep-date-input-polyfill

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

Support dynamically created inputs, so can be used in single page applications.

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

Demo

Try it in IE, Firefox, and macOS Safari.

Install

NPM

npm install --save nodep-date-input-polyfill

Add to your project:

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

or alongside Babel: import 'nodep-date-input-polyfill';
Script Tag: Copy nodep-date-input-polyfill.dist.js from node_modules and include it anywhere in your HTML.
This package also supports AMD.

Bower

bower install nodep-date-input-polyfill

Features

Easily Stylable: These are the default styles, which you may override with your own.
Polyfills valueAsDate and valueAsNumber: Learn more about these properties. They behave as getters and setters.
Keyboard Shortcuts: Esc will hide the datepicker. Up/Down will increment/decrement the date by one day.
Localization: Specify the datepicker's locale by setting the lang attribute of the <input> or any of its parent nodes.

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

<body lang="en">

The default locale is en.

The rendered date format will automatically adhere to the given locale.

Currently supported locales include:
- English (US / UK)
- Chinese (Simplified / Simplified Informal / Traditional)
- Japanese
- Spanish
- Portuguese
- Hindi
- German
- Dutch
- Danish
- Turkish
- Ukrainian
- French
- Italian

Usage Notes

getAttribute and setAttribute will only reflect the input's text content.

In order to work with the input's underlying value, you must get/set its value, valueAsDate, or valueAsNumber properties.

Per the native implementation, polyfilled date inputs will only accept values in the format yyyy-MM-dd.

Contributing

Local Development

Run npm start or, for Cloud9 IDE users: npm run start-c9

Build

Run npm run build

Localization

Please submit PRs with new localizations! Open locales.js to add more. File an issue on GitHub if anything is unclear.

zaarly / nodep-date-input-polyfill Goto Github PK