Vue.js date picker example: implement date picker in Vue.js

If you are building a system that involves booking a specific service or some kind of planning or event creation activities, the date picker is a feature you might want to have. When it comes to Vue.js, you don’t need to reinvent the wheel, as there are already packages that let you implement data picker in Vue.js. So in this article, you will see an extensive Vue.js date picker example.

Advantages and disadvantages of a date picker

Before starting, answer yourself one question – do you really need to use a date picker in Vue.js application? What are the goals of your functionality? Date picker comes at its own cost and it could even be overkill in your case. It might be good or bad, depending on the context. Some of the bigger reasons why you might want to implement Vue.js datepicker:

• You want your user to be able to see unavailable days, holidays, weekends, etc. in a simple way (for example a hotel room reservation system). In this case purpose of a date picker is not only to show a selected date but also to show additional information for a user, so having a date field instead of a date picker, might not suit your needs.
• When it is important for the user to know what the end date will be in the context of a week or a month. Example: the user is scheduling a trip and booking a hotel room. The user might want to depart at a date that is specific – be it Monday, Friday or Sunday. With a date picker, it would be easier for the user to pick the most suitable date for him. Without a date picker, he might need to open a calendar in his computer or mobile device, check the dates, then go back to the website and enter the value (let’s say that there are two fields for this functionality: one is the start date, another is the end date). And having a list with values of the specific dates plus weekdays, wouldn’t help in terms of website usability. So the only rational solution is to use a date picker.
• Users of different countries will be using your application. Different countries use different date formats. There are many different formats out there: 11/01/2020; 01/11/2020; 11 Jan 2020; 11 January 2020, etc. Having a date picker will help to standardize the date format in your system.

As I already mentioned, the date picker has its cost. You might reconsider if you really want to use this feature in your application, if:

• Accessibility is important for your website. Most of the date pickers are not meeting the criteria of accessibility. Even though there is no law that enforces the personal websites to meet the accessibility criteria, you might want to consider making your website accessible. And even if in the description of a date picker it is stated that it is accessible, it might not be.
• You will be using a calendar view date picker where the user needs to click hundreds of times to find the option he wants (for example, he wants to choose his birth date). This completely depends on the date picker you will use, some of them aren’t that bad.

Now when you have the reasons when you might and when you might not want to implement Vue.js date picker, make your own decision. If you are still interested in using it, then keep reading further.

How you can implement date picker in Vue.js

As I mentioned at the beginning, a job is already done for you – there exists a Vue date picker package. It can be downloaded from here. But don’t hurry, we will do everything step by step. Let’s create a new application for the purpose of an example:

vue create datepicker-example

Now change the directory to the directory of a newly created project, install the package of Vue.js date picker:

npm install vuejs-datepicker –save

Now paste the code below to your App.vue file:

<template>
    <div id="app">
        <div class="center">
            <h1>Select a date</h1>
            <Datepicker></Datepicker>
        </div>
    </div>
</template>

<script>
    import Datepicker from 'vuejs-datepicker'

    export default {
        name: 'app',
        components: {
            Datepicker
        }
    }
</script>

<style>
    .center {
        width: 50%;
        margin: 0 auto;
    }
</style>

Simple as that – a date picker we have.

Vue.js date picker example

Without a doubt, a date picker we made does nothing. It doesn’t save the selected data, so anything you clicked on, was visible only for the date picker component itself. In real world scenario you might want to manipulate with the data – send it to a different component, or to the back end. In order to make this more practical, let’s go to the further Vue.js date picker examples.

1 example: a date picker with a custom default date

Let’s update the code we’ve created previously. Here is how you can set a default date for Vue.js date picker:

<template>
    <div id="app">
        <div class="center">
            <h1>Select a date</h1>
            <Datepicker v-model="date"></Datepicker>
        </div>
    </div>
</template>

<script>
    import Datepicker from 'vuejs-datepicker'

    export default {
        name: 'app',
        components: {
            Datepicker
        },
        data: function(){
          return {
            date: new Date(2020, 0,  11)
          }
        }
    }
</script>

<style>
    .center {
        width: 50%;
        margin: 0 auto;
    }
</style>

What we have done here, is that we created a variable that has a name of date and has a date object assigned to it. You could name it anything you like, it truly doesn’t matter, you could name it BabyYoda if you want to. To the date object, we have passed integers that sets as a year, month, and a day values. In this case, we want a default date to be 2020-01-11, so we have to pass number 0 for a January, during the creation of the date project. If we’ve passed number 1, we would set a month as a February. Just something you should keep in mind :).

Next, we bind the date object to our date picker: v-model=”date”, this is where the magic happened. If your variable name is BabyYoda, you should use this name instead of “date”. Great, after this, we should have a default date set:

2 example: change the format of a date

You might already had noticed that the date is in this format: January 11, 2020. However, you can easily change it with the prop format to the international date format ISO 8601:

<Datepicker v-model="date" format="yyyy-MM-dd"></Datepicker>

Now your date picker date format will be this:

Full list of props is in the 3 example below.

3 example: props that can be used for a date picker (changing first date of the week, making inline calendar, etc.)

One prop was already mentioned in the previous example, it was format prop. In case you are a beginner and you are not familiar with the term prop, this is how custom attributes of components in Vue.js are called. You can make your own custom prop (properties) and register it, then reference it with a name you gave to it. But don’t worry, you don’t need creating everything from scratch, there are many different Vue.js date picker props that can be used for your needs:

Prop	Type	Default	Description
value	Date|String		Date value of the datepicker
name	String		Input name property
id	String		Input id
format	String|Function	dd MMM yyyy	Date formatting string or function
full-month-name	Boolean	false	To show the full month name
language	Object	en	Translation for days and months
disabled-dates	Object		See below for configuration
placeholder	String		Input placeholder text
inline	Boolean		To show the datepicker always open
calendar-class	String|Object		CSS class applied to the calendar el
input-class	String|Object		CSS class applied to the input el
wrapper-class	String|Object		CSS class applied to the outer div
monday-first	Boolean	false	To start the week on Monday
clear-button	Boolean	false	Show an icon for clearing the date
clear-button-icon	String		Use icon for button (ex: fa fa-times)
calendar-button	Boolean	false	Show an icon that that can be clicked
calendar-button-icon	String		Use icon for button (ex: fa fa-calendar)
calendar-button-icon-content	String		Use for material-icons (ex: event)
day-cell-content	Function		Use to render custom content in day cell
bootstrap-styling	Boolean	false	Output bootstrap v4 styling classes.
initial-view	String	minimumView	If set, open on that view
disabled	Boolean	false	If true, disable Datepicker on screen
required	Boolean	false	Sets html required attribute on input
typeable	Boolean	false	If true, allow the user to type the date
use-utc	Boolean	false	Use UTC for time calculations
open-date	Date|String		If set, open on that date
minimum-view	String	‘day’	If set, lower-level views won’t show
maximum-view	String	‘year’	If set, higher-level views won’t show

Do you want that the full month name would be written instead of abbreviation? Add full-month-name=true to the element: <Datepicker full-month-name=true></Datepicker>

Do you want to let users typing the date to a field manually? Here you go: typeable=true

You want your date picker to be open? Just add :inline=”true” to the <Datepicker>:

As you see from this Vue.js date picker example, there are many useful properties you can use. A lot of customization can be made.

Vue.js date picker alternatives

It’s very important to evaluate if the date picker will really help user flow and if you really need it. If it only creates additional overhead, it is really not worth to implement date picker in the Vue.js application.

Talking about the alternatives, the package we used is not the one and only. There are some alternatives. Here are some of them:

• A simple date field inside a form. Users can choose a date from a list, however, it’s not the case if the purpose of a date is to choose a birth date. Imagine how annoyed the user will be if he needs to scroll the list until he founds his specific date.
• V-calendar. A lightweight Vue.js plugin that allows building calendars.
• Vuetify has a built-in date picker. If you are using a Vuetify, you don’t need to install any packages, and creating a date picker object is simple as using the v-date-picker component.