moo-dateinput-polyfill
Advanced tools
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.
input[type=date] presentation for desktop browsersvalue formatyyyy-MM-dd [RFC 3339] formatplaceholder attribute works as expected in browsers that support iti18n folder and include a new file in your project)<html lang="en-US">)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-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>
Displayed date can be formatted using a data-format attribute on the <input type="date">. For example:
<input type="date" data-format="EE, MMMM dd'th' yyyy">
This will display the selected date like "Monday, December 8th 2014" on the input.
If data-format is not specified, date is formatted using the pattern "E, dd MMM yyyy".
Possible parameters for the format are:
| Letter | Date Component | Presentation | Examples |
|---|---|---|---|
| y | Year | Year | 2002; 02; 2 |
| M | Month in year | Month | July; Jul; 07; 7 |
| w | Week in year | Number | 07; 7 |
| W | Week in month | Number | 2 |
| D | Day in year | Number | 009; 9 |
| d | Day in month | Number | 08; 8 |
| F | Day of week in month (1st, 2nd, 3rd Tuesday) | Number | 2 |
| E | Day name in week | Text | Tuesday; Tu. |
| u | Day number of week (1 = Monday, ..., 7 = Sunday) | Number | 1 |
Number of letters in the parameter name specifies form of the output value, for instance:
"M" yields "1"
"MM" yields "01"
"MMM" yields "Jan"
"MMMM" yields "January"
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-native attribute. Possible values are desktop and mobile. They allow to limit type of devices where you want to see a native control.
For example, the code below defines a dateinput that uses a native implementation on mobile phones, but ALL desktop browsers (even Chrome desktop) will have a consistent widget created by the polyfill.
<input type="date" data-native="mobile" name="foo" value="bar">
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.
FAQs
input[type=date] polyfill for better-dom
We found that moo-dateinput-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.