Usage

• Component registration
• Basic example
• Attributes and event listeners
• Passing options to underlying Pikaday
• Manually toggle datepicker

Component registration

NOTE

Skip this step when using standalone version.

In your main project file add

import VuePikaday from '@netcz/vue-pikaday';
Vue.use(VuePikaday);

and from now on you'll be able to use vue-pikaday component in your application.

TIP

If you wish to use Pikaday default styles, include them through VuePikaday

import '@netcz/vue-pikaday/dist/vue-pikaday.min.css';

Basic example

Simply include vue-pikaday component with v-model defined.

<template>
  <vue-pikaday
    v-model="now"
  />
  <button @click="clear()">Clear</button>
</template>

<script>
  import '@netcz/vue-pikaday';

  export default {
    data() {
      return {
        now: null
      }
    },
    methods: {
      clear() {
        this.now = null;
      }
    }
  }
</script>

Attributes and event listeners

Component passes attributes and binds event listeners down to underlying input. All attributes and/or event listeners you are used to use will work.

TIP

Open browser console to see event listeners working.

<template>
  <vue-pikaday 
    v-model="now"
    placeholder="Pick a date"
    @focus="triggerFocus()"
    @blur="triggerBlur()"
  />
</template>

<script>
  import '@netcz/vue-pikaday';

  export default {
    data() {
      return {
        now: null
      }
    },
    methods: {
      triggerFocus() {
        console.log('focus triggered');
      },
      triggerBlur() {
        console.log('blur triggered')
      }
    }
  }
</script>

Passing options to underlying Pikaday

Options can be passed using options prop on component. To see all possible options, consult official Pikaday documentation.

TIP

see Config Reference for more info

<template>
  <vue-pikaday 
    v-model="now"
    :options="pikadayOptions" 
  />
</template>

<script>
  import '@netcz/vue-pikaday';

  export default {
    data() {
      return {
        now: null,
        pikadayOptions: {
          format: 'YYYY/MM/DD',
          minDate: moment().toDate(),
          maxDate: moment().add(7, 'days').toDate()
        }
      }
    }
  }
</script>

Manually toggle datepicker

To delegate datepicker opening to other element than underlying input, use two-way v-p-visible directive.

<template>
  <vue-pikaday 
    v-model="now"
    v-p-visible="visible"
  />
  <button @click="toggle()">{{ label }}</button>
</template>

<script>
  import '@netcz/vue-pikaday';

  export default {
    data() {
      return {
        now: null,
        visible: false
      }
    },
    computed: {
      label() {
        return this.visible ? 'Hide' : 'Show';
      }
    },
    methods: {
      toggle() {
        this.visible = !this.visible;
      }
    }
  }
</script>