npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nodep-date-input-polyfill

v5.2.0

Published

Automatically adds datepickers to input[type=date] on IE, Firefox, and macOS Safari.

Downloads

4,324

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

brianblakelybrianblakely

Keywords

html5lightlightweightinputtypedatedatepickerpolyfill

Readme

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 / Rollup / Babel / ES: import 'nodep-date-input-polyfill';

  • Webpack 1 / Browserify: require('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

    • Polish

    • Czech

    • Russian

Usage Notes

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

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

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

  • If a user dirties a date field by typing into it manually, the browser will no longer allow the polyfill to populate the field from the datepicker.

    The polyfill will not attempt to solve this on its own. One potential workaround that you may choose to adopt is to prevent typing entirely:

    el.addEventListener('keydown', (e)=> e.preventDefault());

  • When submitting an HTML form, the browser will submit the date field's value attribute (i.e. its text content), not the normalized content of the field's value property.

    If you don't want that, one potential workaround is to change the attribute upon form submission:

    el.form.addEventListener('submit', (e)=> el.setAttribute('value', el.value));

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.

Thanks

Some words of appreciation for those who have submitted tickets, pull requests, and new localizations. The library is more robust and helpful to everyone because of those who choose to help out.