@fatihbasar/vue-flatpickr-component

    8.1.7 • Public • Published

    Vue FlatPickr Component

    downloads jsdelivr npm-version github-tag build codecov license

    Vue.js component for Flatpickr date-time picker

    Demo or JSFiddle

    Features

    • Reactive v-model value
      • You can change flatpickr value programmatically
    • Reactive config options
      • You can change config options dynamically
      • Component will watch for any changes and redraw itself
      • You are suggested to modify config via Vue.set
    • Can emit all possible events
    • Compatible with Bootstrap, Bulma or any other CSS framework
    • Supports wrapped mode
      • Just set wrap:true in config and component will take care of all
    • Works with validation libraries

    Installation

    # yarn
    yarn add vue-flatpickr-component
    
    # npm
    npm install vue-flatpickr-component

    Usage

    Minimal example

    <template>
      <div>
        <flat-pickr v-model="date"></flat-pickr>
      </div>
    </template>
    
    <script>
      import flatPickr from 'vue-flatpickr-component';
      import 'flatpickr/dist/flatpickr.css';
      
      export default {    
        data () {
          return {
            date: null,       
          }
        },
        components: {
          flatPickr
        }
      }
    </script>

    Detailed example

    This example is based on Bootstrap 4 input group

    <template>
      <section>
        <div class="form-group">
          <label>Select a date</label>
          <div class="input-group">
            <flat-pickr
                    v-model="date"
                    :config="config"                                                          
                    class="form-control" 
                    placeholder="Select date"               
                    name="date">
            </flat-pickr>
            <div class="input-group-btn">
              <button class="btn btn-default" type="button" title="Toggle" data-toggle>
                <i class="fa fa-calendar">
                  <span aria-hidden="true" class="sr-only">Toggle</span>
                </i>
              </button>
              <button class="btn btn-default" type="button" title="Clear" data-clear>
                <i class="fa fa-times">
                  <span aria-hidden="true" class="sr-only">Clear</span>
                </i>               
              </button>
            </div>
          </div>
        </div>
        <pre>Selected date is - {{date}}</pre>
      </section>
    </template>
    
    <script>
      // bootstrap is just for this example
      import 'bootstrap/dist/css/bootstrap.css';
      // import this component
      import flatPickr from 'vue-flatpickr-component';  
      import 'flatpickr/dist/flatpickr.css';
      // theme is optional
      // try more themes at - https://flatpickr.js.org/themes/
      import 'flatpickr/dist/themes/material_blue.css';
      // localization is optional
      import {Hindi} from 'flatpickr/dist/l10n/hi.js';
      
      export default {
        name: 'yourComponent',
        data () {
          return {
            // Initial value
            date: new Date(),
            // Get more form https://flatpickr.js.org/options/
            config: {
              wrap: true, // set wrap to true only when using 'input-group'
              altFormat: 'M j, Y',
              altInput: true,
              dateFormat: 'Y-m-d',
              locale: Hindi, // locale for this instance only          
            },                
          }
        },
        components: {
          flatPickr
        },    
      }
    </script>

    As plugin

      import Vue from 'vue';
      import VueFlatPickr from 'vue-flatpickr-component';
      import 'flatpickr/dist/flatpickr.css';
      Vue.use(VueFlatPickr);

    This will register a global component <flat-pickr>

    Events

    • The component can emit all possible events, you can listen to them in your component
    <flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>
    • Event names has been converted to kebab-case.
    • You can still pass your methods in :config like original flatpickr do.

    Available props

    The component accepts these props:

    Attribute Type Default Description
    v-model / value String / Date Object / Array / Timestamp / null null Set or Get date-picker value (required)
    config Object { wrap:false } Flatpickr configuration options
    events Array Array of sensible events Customise the events to be emitted

    Install in non-module environments (without webpack)

    <!-- Flatpickr related files -->
    <link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
    <!-- Vue js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
    <!-- Lastly add this package -->
    <script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@8"></script>
    <script>
    // Initialize as global component
    Vue.component('flat-pickr', VueFlatpickr);
    </script>

    Run examples on your localhost

    • Clone this repo
    • You should have node-js 10.13.0>= and yarn >=1.x pre-installed
    • Install dependencies yarn install
    • Run webpack dev server yarn start
    • This should open the demo page at http://localhost:9000 in your default web browser

    Testing

    • This package is using Jest and vue-test-utils for testing.
    • Tests can be found in __test__ folder.
    • Execute tests with this command yarn test

    Changelog

    Please see CHANGELOG for more information what has changed recently.

    Caveats

    • ⚠️ Don't pass config option as inline literal object to :config prop.
    <!-- This will cause date picker to freeze -->
    <flat-picker v-model="card" :config="{ dateFormat: 'd-m-Y H:i' }"></flat-picker>
    • Vue.js cannot detect changes when literal object/arrays passed within template, see

    License

    MIT License

    Install

    npm i @fatihbasar/vue-flatpickr-component

    DownloadsWeekly Downloads

    0

    Version

    8.1.7

    License

    MIT

    Unpacked Size

    217 kB

    Total Files

    10

    Last publish

    Collaborators

    • fatihbasar