better-dateinput-polyfill

2018-08-12 admin

better-dateinput-polyfill是什么

什么是better-dateinput-polyfill,input[type=date] polyfill for better-dom

better-dateinput-polyfill介绍、better-dateinput-polyfill使用

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-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:

Now you can download project dependencies:

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

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37820.html

文章标题:better-dateinput-polyfill

回到顶部