In this tutorial, grokonez.com shows you way to add a DatePicker component to VueJs App using Pikaday.
Contents
Overview
Demo
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: "YYYY-MM-DD", onSelect: () => { 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
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.