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.
Try it IE, Firefox, and macOS Safari.
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.jsfromnode_modulesand include it anywhere in your HTML. -
This package also supports AMD.
bower install nodep-date-input-polyfill
-
Easily Stylable: These are the default styles, which you may override with your own.
-
Polyfills
valueAsDateandvalueAsNumber: Learn more about these properties. They behave as getters and setters. -
Keyboard Shortcuts:
Escwill hide the datepicker.Up/Downwill increment/decrement the date by one day. -
Localization: Specify the datepicker's locale by setting the
langattribute 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, Chinese (Simplified / Simplified Informal / Traditional), Japanese, Spanish, Portuguese, Hindi, German, and Danish.
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.
Run npm start or, for Cloud9 IDE users: npm run start-c9
Run npm run build
Please submit PRs with new localizations! Open locales.js to add more. File an issue on GitHub if anything is unclear.