input[type=date] polyfill for better-dom
Clone or download
Latest commit 2925034 Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 3.2.2 Dec 3, 2018
src always use dy=".35em" for background image Dec 3, 2018
test store this._picker to simplify functions Nov 20, 2018
.gitignore update better-dom to 1.5.3, update infrastructure Oct 15, 2013
.travis.yml improve travis Nov 18, 2018
LICENSE.txt initial commit May 9, 2013
README.md add support for global formats Dec 1, 2018
index.html fix picker positionings on some layouts Dec 3, 2018
package.json 3.2.2 Dec 3, 2018

README.md

better-dateinput-polyfill
NPM version NPM downloads Build Status Coverage Status

input[type=date] polyfill for better-dom

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+