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:

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

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

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

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

By grokonez | June 5, 2019.



Related Posts


Got Something To Say:

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

*