Ember-paper-flatpickr NPM

ember-paper-flatpickr

Enhance ember-paper paper-input with ember-flatpickr, this addon depends on ember-paper and ember-flatpickr.

To get stuff like form validations, ember-paper styles, etc...

You can check the paper-input options in ember-paper docs and flatpickr options in ember-flatpickr or flatpickr.js.org

There are some caveats, currently the events like onFocus or onBlur used for normal ember-paper paper-input does not work if we use the flatpickr option altInput=true because flatpickr creates a new input and hides the ember-paper paper-input.

Apart from that, you can pass all options to flatpickr and paper-input.

Currently this addon is using a fork of ember-flatpickr.

Installation

Compatibility

Ember.js v2.18 or above
Ember CLI v2.13 or above
Node.js v8 or above

Installation

ember install ember-paper-flatpickr

Usage

If you want to allowClear you need to wrap like this the paper-flatpickr-input and pass down the allowClear to the wrapper which yields the input Any template.hbs, you should pass all the paper-input options and flatpickr options to the paper-flatpickr-input or via the yielded Flatpickr.input

    <PaperFlatpickr @allowClear={{true}} class="flex" as |Flatpickr|>
        <Flatpickr.input
            @disableMobile={{true}}
            @allowInput={{false}}
            @altInput={{true}}
            @appendDataInput={{false}}
            @classNames={{classString}}
            @altFormat="MMMM D, YYYY"
            @dateFormat="Y-m-d"
            @value={{readonly dateSelected}}
            @required={{true}}
            @enableTime={{false}}
            @onChange={{action (mut dateSelected)}}
            @locale="es"
            @label="otherheyeh"
            @placeholder="Heyhey"
        />
    </PaperFlatpickr>

If you don't care about allowClear you can just use the paper-flatpickr-input directly

    <PaperFlatpickrInput
        @disableMobile={{true}}
        @allowInput={{false}}
        @altInput={{true}}
        @appendDataInput={{false}}
        @classNames={{classString}}
        @altFormat="MMMM D, YYYY"
        @dateFormat="Y-m-d"
        @value={{readonly dateSelected}}
        @required={{true}}
        @enableTime={{false}}
        @onChange={{action (mut dateSelected)}}
        @locale="es"
        @label="otherheyeh"
        @placeholder="Heyhey"
    />