How to add Date Picker component to VueJs App using Pikaday


In this tutorial, shows you way to add a DatePicker component to VueJs App using Pikaday.




Date Picker using Pikaday
Setup in Nodejs Project

There are 2 ways to integrate pikaday into a Nodejs Application:

– We can run command: npm install pikaday.
Then use Pikaday css with:

@import './node_modules/pikaday/css/pikaday.css';

– Or link to CDN:

<script src=""></script>

Then use css by this following code:

<link rel="stylesheet" type="text/css" href="">
Use Pikaday

We bind Pikaday to an input field:

<input ref="input">

And this is how to initialize and format it:

const datePicker = new Pikaday({
  field: this.$refs.input,
  format: &quot;YYYY-MM-DD&quot;,
  onSelect: () =&gt; {
  // other options

For more details, you can visit pikaday on github.


We will create a separated DatePicker component, then embed it in App component.


– vue 2.5.11
– pikaday 1.8.0

Setup modules for Pikaday

Run command to add necessary modules:
npm install moment
npm install pikaday

Create DatePicker component

Inside src folder, create components folder, then create DatePicker.vuefile:


  <input :value="value" ref="datepick" :placeholder="format">

import Pikaday from "pikaday";
import "pikaday/css/pikaday.css";

export default {
  props: {
    value: { require: true },
    format: { default: "YYYY-MM-DD" },
    options: { default: {} }
  mounted() {
    const datePicker = new Pikaday({
      field: this.$refs.datepick,
      format: this.format,
      onSelect: () => {
        this.$emit("input", datePicker.toString());

The DatePicker component receives value (via v-model directive), format, options from its parent component.

It also has onSelect() callback function (for when a date is selected) that emits date to the parent component (v-model value).

Create component that contains DatePicker component

Now we’re gonna import DatePicker component to App component.


  <div class="container">
    <h5>Vue DatePicker Demo</h5>
    <form class="form-group" @submit.prevent="submitForm">
      <label for="date-picker">Select a date</label>
        class="form-control col-md-4"
        format="MMM DD, YYYY"
        :options="{firstDay: 0, showWeekNumber: true}"
      <button type="submit" class="btn btn-primary mt-2">Submit</button>

import DatePicker from "./components/DatePicker.vue";
import "bootstrap/dist/css/bootstrap.css";

export default {
  components: {
  data() {
    return {
      date: ""
  methods: {
    submitForm() {

v-model="date" will pass data to date-picker component as value prop.
We also pass date format and more options:
firstDay: 0 means the first day in a row is Sunday.
showWeekNumber: true means we also has a week column in the left side of calendar.

Source code

Run command:
npm install
npm run dev


2 thoughts on “How to add Date Picker component to VueJs App using Pikaday”

  1. This can be convenient for demos or very small apps with a handful of components. However, the pattern does not scale well to medium or large-scale applications, so we strongly recommend using Vuex to manage state in most cases.

Leave a Reply

Your email address will not be published. Required fields are marked *