`input[type=date]` polyfill for better-dom

	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

Version 3.3 requires better-dom 4.1 or above. Make sure you have latest version of better-dom.

$ 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+

fstani/better-dateinput-polyfill

input[type=date] polyfill for better-dom