Vue.js datepicker example:

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, 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 already are packages that let’s you to 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 a 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 an 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 (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 an additional information for a user, so having a date field instead a date picker, might not suite your needs.
  • When it is important for the user to know what the end date will be in context of a week or a month. Example: user is scheduling a trip and booking a hotel room. 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 start date, another is end date). And having a list with a values of the specific dates plus a week days, 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 uses 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, 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 the accessibility. Even thought 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 datepicker, 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 installation

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 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 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 binded the date object to our date picker: v-model=”date”, this is where the magic happened. If you variable name is BabyYoda, you should use this name instead of “date”. Great, after this, we should have a default date set:

How to set a default date for Vue.js datepicker

2 example: change the format of a date

You might already 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:

Date format of a date picker

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 a term prop, this is how custom attributes of a 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:

PropTypeDefaultDescription
valueDate|StringDate value of the datepicker
nameStringInput name property
idStringInput id
formatString|Functiondd MMM yyyyDate formatting string or function
full-month-nameBooleanfalseTo show the full month name
languageObjectenTranslation for days and months
disabled-datesObjectSee below for configuration
placeholderStringInput placeholder text
inlineBooleanTo show the datepicker always open
calendar-classString|ObjectCSS class applied to the calendar el
input-classString|ObjectCSS class applied to the input el
wrapper-classString|ObjectCSS class applied to the outer div
monday-firstBooleanfalseTo start the week on Monday
clear-buttonBooleanfalseShow an icon for clearing the date
clear-button-iconStringUse icon for button (ex: fa fa-times)
calendar-buttonBooleanfalseShow an icon that that can be clicked
calendar-button-iconStringUse icon for button (ex: fa fa-calendar)
calendar-button-icon-contentStringUse for material-icons (ex: event)
day-cell-contentFunctionUse to render custom content in day cell
bootstrap-stylingBooleanfalseOutput bootstrap v4 styling classes.
initial-viewStringminimumViewIf set, open on that view
disabledBooleanfalseIf true, disable Datepicker on screen
requiredBooleanfalseSets html required attribute on input
typeableBooleanfalseIf true, allow the user to type the date
use-utcBooleanfalseUse UTC for time calculations
open-dateDate|StringIf set, open on that date
minimum-viewString‘day’If set, lower-level views won’t show
maximum-viewString‘year’If set, higher-level views won’t show

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>

Date picker prop that changes month name to the full name

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

Typeable Vue.js date picker

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

Inline Vue.js date picker

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 Vue.js application.

Talking about the alternatives, 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. User 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 v-date-picker component.

1 thought on “Vue.js date picker example: implement date picker in Vue.js”

  1. How yo use input-class, calender-class, wrapper-class props ? Could you please give small example.
    I want to override some css :
    1. Need to remove datepicker’s input textbox border.
    2. selected date’s color.

    Looking forward to hear from you.

Leave a Comment

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