/vue-pikaday

A simple yet flexible custom directive for using Pikaday in Vue.js(v2.x.x) apps.

Primary LanguageJavaScript

Vue-Pikaday

A simple yet flexible custom directive for using Pikaday in Vue.js (v2.x.x) apps.

banner

Demo

Click Here

Usage

  1. Install via npm:

    npm install vue-pikaday-directive --save
    
  2. Register Vue-Pikaday as a directive in your Vue.js app:

    // this is your main.js file
    
    import Vue from 'vue';
    import V_Pikaday from 'vue-pikaday-directive';
    
    const App = new Vue({
        el: '#app',
        data: {
            startDate: '',
            endDate: ''
        },
        directives: {
            'pikaday': V_Pikaday
        }
    });
    
  3. Vue-Pikaday need an <input> element to display date. Add v-model and v-pikaday directive to this <input>.

    // this is your index.html file
    ...
    <input id="this-is-start-date" type="text" v-model="startDate" v-pikaday>
    <input id="this-is-end-date" type="text" v-model="endDate" v-pikaday>
    ...
    

    You may wonder why we need both v-model and v-pikaday here. v-model is for data binding. v-pikaday is just for initializing the Pikaday instance. It DOES NOT do any data binding job.

  4. If you need to set some custom options for a specific Pikaday instance (eg. a different format of date), you can do it by binding an options object to v-pikaday directive:

    // this is your index.html file
    ...
    <input id="this-is-start-date" type="text" v-model="startDate" v-pikaday>
    <input id="this-is-end-date" type="text" v-model="endDate" v-pikaday="endDatePikadayOptions">
    ...
    
    // this is your main.js file
    ...
    const App = new Vue({
        el: '#app',
        data: {
            startDate: '',
    
            endDate: '',
            endDatePikadayOptions: {
                format: 'D/M/YYYY',
                // you can put more pikaday options here, based on your needs
                // however `field` and `onSelect` option will be ignored
                // because they are being used by v-pikaday directive to initialize a Pikaday instance
            },
        },
        directives: {
            'pikaday': V_Pikaday
        }
    });
    
  5. If you need to access a Pikaday instance, you can do it by:

    // this is your main.js file
    
    ...
    mounted: function () {
        const startDateElement = document.querySelector('#this-is-start-date');
        console.log(startDateElement.pikadayInstance);
        // you can access a Pikaday instance at the `mounted` stage of the parent VM
        // by accessing the `pikadayInstance` property of the element that v-pikaday directive is bind with
    }
    ...
    

License

MIT