Nirvana Playing Madonna

    better-dateinput-polyfill

    4.0.0-beta.2 • Public • Published

    input[type=date] polyfill

    NPM version NPM downloads Build Status Coverage Status Twitter

    Donate 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

    • lightweight polyfill with no dependencies
    • works for initial and dynamic content elements
    • normalizes input[type=date] presentation for desktop browsers
    • submitted value always has standards based yyyy-MM-dd [RFC 3339] format
    • placeholder attribute works as expected
    • it's possible to change displayed date value format
    • you are able to control where to apply the polyfill
    • keyboard and accessibility friendly

    Installation

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

    Forcing the polyfill

    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)">

    Change default date presentation format

    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>

    Contributing

    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.

    Browser support

    Desktop

    • Chrome
    • Safari
    • Firefox
    • Opera
    • Edge
    • Internet Explorer 10+

    Mobile

    • iOS Safari 10+
    • Chrome for Android 70+

    Install

    npm i better-dateinput-polyfill

    DownloadsWeekly Downloads

    888

    Version

    4.0.0-beta.2

    License

    MIT

    Unpacked Size

    80.6 kB

    Total Files

    19

    Last publish

    Collaborators

    • chemerisuk