@inventora/better-dateinput-polyfill
Advanced tools
Readme
input[type=date] polyfill
 | Your help is appreciated. Create a PR, submit a bug or just grab me :beer: |
|---|
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 browsersyyyy-MM-dd [RFC 3339] formatplaceholder attribute works as expected$ npm install better-dateinput-polyfill
Then append the following scripts to your page:
<script src="node_modules/better-dateinput-polyfill/dist/better-dateinput-polyfill.js"></script>
Sometimes it's useful to override browser implemetation with the consistent control implemented by the polyfill. To suppress feature detection you can add <meta name="dateinput-polyfill-media"> into your document <head>. Value of content attribute is a media query where polyfill will be applied:
<!-- force polyfill everywhere -->
<meta name="dateinput-polyfill-media" content="screen">
<!-- force polyfill only on mobile devices in portrait mode-->
<meta name="dateinput-polyfill-media" content="screen and (orientation: portrait)">
When no spicified polyfill uses browser settings to format displayed date. You can override date presentation globally with <meta name="dateinput-polyfill-format"> via content attribute or directly on a HTML element with data-format attribute. Value should be options for the Date#toLocaleString call as a stringified JSON object:
<html>
<head>
<!-- Override default date presentation format -->
<meta name="dateinput-polyfill-format" content='{"month":"long","year":"numeric","day":"numeric"}'>
</head>
<body>
<!-- Override date presentation format on a particular element -->
<input type="date" data-format='{"month":"short","year":"numeric","day":"numeric"}'>
</body>
</html>
Download git repository and install project dependencies:
$ npm install
The project uses set of ES6 transpilers to compile the output file. Now use command below to start development:
$ npm run watch
After any change file build/better-dateinput-polyfill.js is recompiled automatically.
FAQs
input[type=date] polyfill
We found that @inventora/better-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
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.