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:

– Or link to CDN:

Then use css by this following code:

Use Pikaday

We bind Pikaday to an input field:

And this is how to initialize and format it:

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:


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.


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


By grokonez | June 5, 2019.

Related Posts

1 thought 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.

Got Something To Say:

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