npm

Need private packages and team management tools?Check out npm Orgs. »

better-dateinput-polyfill

3.2.7 • Public • Published

input[type=date] polyfill for better-dom

NPM version NPM downloads Build Status Coverage Status Twitter

Donate Your help is appreciated. Create a PR, submit a bug or just grab me 🍺

Why another date picker? The problem is that most of existing solutions do not follow standards regarding to value property format, that should have “a valid full-date as defined in [RFC 3339]”. In other words representation of date can vary, but the string value should have yyyy-MM-dd format. It helps to work with such values consistently regarding on the current language.

VIEW DEMO

Features

  • normalizes input[type=date] presentation for desktop browsers
  • submitted value always has yyyy-MM-dd [RFC 3339] format
  • live extension - works for the current and future content
  • placeholder attribute works as expected in browsers that support it
  • fully customizable date picker, including displayed value format via data-format attribute
  • control when to apply the polyfill using data-polyfill attribute
  • US variant for days of week is supported (use <html lang="en-US">)
  • keyboard and accessibility friendly

Installation

$ npm install better-dateinput-polyfill better-dom

Then append the following scripts to your page:

<script src="node_modules/better-dom/dist/better-dom.js"></script>
<script src="node_modules/better-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>

Forcing the polyfill

Sometimes it's useful to override browser implemetation with the consistent control implemented by the polyfill. In order to suppress feature detection you can use the data-polyfill attribute. Possible values are desktop, mobile, all, none. They allow to limit type of devices where you want to see the native control.

<!-- force polyfill only on mobile devices -->
<input type="date" data-polyfill="mobile">
<!-- force polyfill on any device -->
<input type="date" data-polyfill="all">
<!-- does not polyfill anywhere -->
<input type="date" data-polyfill="none">

Change default date presentation format

Version 3 uses Intl methods to format presented date value according to the current page locale. You can customize it by specifying data-format attribute with options for the Date#toLocaleString call as a stringified JSON object:

<input type="date" data-format='{"month":"short","year":"numeric","day":"numeric"}'>

When you set the same presentation format multiple times it makes sense to define a global format. Add extra <meta> element with appropriate values for name and content attributes into document <head>. Later in HTML you can just use a global format name as a value for data-format:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <meta name="data-format:YYYYmmm" content='{"year":"numeric","month":"short"}'>
</head>
<body>
    ...
    <input type="date" name="test" value="2000-01-01" data-format="YYYYmmm">
</body>
</html>

Contributing

In order to modify the source code you have to install gulp globally:

$ npm install -g gulp

Now you can download project dependencies:

$ npm install

The project uses set of ES6 transpilers to compile the output file. You can use command below to start development:

$ npm start

After any change it recompiles build/better-dateinput-polyfill.js and runs unit tests automatically.

Browser support

Desktop

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

Mobile

  • iOS Safari 7+
  • Chrome for Android 30+

install

npm i better-dateinput-polyfill

Downloadsweekly downloads

797

version

3.2.7

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability