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



By grokonez | June 5, 2019.

Last updated on February 19, 2021.


Related Posts

Post Tags


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

    Reply

  11. I would like to get across my affection for your kindness in support of men and women that really need help on this matter. Your special commitment to passing the solution across came to be extremely productive and has continuously empowered ladies like me to realize their targets. Your new interesting tips and hints means a lot to me and additionally to my colleagues. Thank you; from each one of us. Ursula Rupert Faletti

    Reply

  12. berarti kalau misalnya ada ibu-ibu yang jualan kue termasuk UMKM juga bukan sih? atau pendapatannya harus mencapai nilai minimal buat disebut UMKM? Anatola Harp Jabe

    Reply

  17. I appreciate, cause I found just what I was looking for. You have ended my 4 day long hunt! God Bless you man. Have a nice day. Bye Mollee Christoffer Id

    Reply

  22. NJ-I’ve heard nothing but great things about you. I’m headed to your website now to see which book to start with. Thanks so much for the entertaining interview. It’s always so much fun to learn things about the authors we read. Gerrie Carson Brinna

    Reply

  24. Greetings! Very useful advice in this particular article! It is the little changes that will make the most important changes. Thanks for sharing! Ninon Heall Rudy

    Reply

  31. I have witnessed that charges for on-line degree authorities tend to be an excellent value. For instance a full 4-year college Degree in Communication in the University of Phoenix Online consists of 60 credits with $515/credit or $30,900. Also American Intercontinental University Online comes with a Bachelors of Business Administration with a full program feature of 180 units and a worth of $30,560. Online studying has made taking your college diploma far less difficult because you can certainly earn the degree from the comfort in your home and when you finish from office. Thanks for all other tips I have certainly learned from your web-site. Lorna Morley Cortney

    Reply

  33. very handful of internet websites that come about to be comprehensive beneath, from our point of view are undoubtedly nicely worth checking out Magdaia Heall Myrwyn

    Reply

  34. I am not sure where you are getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for fantastic info I was looking for this info for my mission.| Dody Valentine Kathie

    Reply

  36. Can I simply just say what a relief to discover somebody who truly understands what they are discussing on the web. You definitely realize how to bring an issue to light and make it important. More and more people really need to check this out and understand this side of the story. I was surprised you are not more popular since you surely have the gift. Adela Welch Chris

    Reply

  39. As a site owner I believe the material here is reallygreat. I thank you for your time. You should keep it up forever! Best of luck. Flore Harp Teillo

    Reply

  41. These are genuinely impressive ideas in concerning blogging. You have touched some fastidious things here. Any way keep up wrinting.| Dyanna Gardner Marcel

    Reply

  42. Carefully determine what is important to include on a page, and what is better reserved for the next page. Meagan Sawyere Burchett Martha Olivier Iives

    Reply

  43. So happy to hear from you. This season seems to be exceeding your highest expectations. Travel safely and in health. Love you guys. Ron Joli Andris Sansbury

    Reply

  45. helo sir/madam, puyde po makabili yong reviewer sa civil service, kasi po kailangan nga ako maka pasa dahil almost 18 years na po ako sa government di ako makatanggap nang mga promotion items dahil di nga ako passers, please kindly share the review. paki tex po . magkaano o saan makabili. kailangan ko this is my mobile number 09099242537 Biddy Augustus Harolda

    Reply

  46. Its such as you learn my thoughts! You seem to grasp a lot approximately this, such as you wrote the e-book in it or something. I believe that you can do with a few p.c. to power the message home a little bit, but other than that, this is excellent blog. A fantastic read. I will definitely be back. Tate Wainwright Sheaff

    Reply

  47. 795571 361818It is not that I want to duplicate your internet site, but I genuinely like the style. Could you tell me which style are you employing? Or was it custom produced? 869828 Florence Kimbell Castara

    Reply

  48. Hi, why is it that all the “urls submitted by sitemaps” and the “urls on web index” of all my sites went terribly down? Are there any changes made by google on how and how often do they update the data here? Thanks Malissa Chilton Crissie

    Reply

  49. Greetings Sir, I think with the help of the Instagram TV the videos can be added up and can run for more than 5minutes and You tube is another idea. Lilas Morgen Stacie

    Reply

Got Something To Say:

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

*