How to add Date Picker component to VueJs App using Pikaday

vuejs-datepicker-component-pikaday-feature-image.png

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

Overview

Demo

vue-date-picker-component-pikaday-example

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="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Then use css by this following code:


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
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; {
    console.log(datePicker.toString());
  },
  // other options
});

For more details, you can visit pikaday on github.

Practice

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

Technology

– 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:

src/components/DatePicker.vue


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

<script>
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());
      },
      ...this.options
    });
  }
};
</script>

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.

src/App.vue


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

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

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      date: ""
    };
  },
  methods: {
    submitForm() {
      console.log(this.date);
    }
  }
};
</script>

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

vue-datepicker-example

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 *