Skip to content
input[type=date] polyfill for better-dom
JavaScript CSS HTML

README.md

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

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 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
  • full i18n support (localized files located at better-time-element)
  • US variant for days of week is supported (use <html lang="en-US">)
  • * keyboard and accessibility friendly

Installation

The simplest way is to use bower:

$ bower install better-dateinput-polyfill

This will clone the latest version of the better-dateinput-polyfill with dependencies into the bower_components directory at the root of your project.

Then append the following script on your page:

<script src="bower_components/better-dom/dist/better-dom.js"></script>
<script src="bower_components/better-i18n-plugin/dist/better-i18n-plugin.js"></script>
<script src="bower_components/better-time-element/dist/better-time-element.js"></script>
<script src="bower_components/better-emmet-plugin/dist/better-emmet-plugin.js"></script>
<script src="bower_components/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">

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 6.0+
  • Firefox 16+
  • Opera 12.10+
  • Internet Explorer 8+ (see notes)

Mobile

  • iOS Safari 6+
  • Android 2.3+
  • Chrome for Android
Something went wrong with that request. Please try again.