Datepicker component for Vue.js

DatePicker helps to display calendar so that you could pick date on input box. In this post I am going to share simple Datepicker component for Vue.js Which allow your input box to display datepicker and user can easily pick date.


npm install vue-date –save


use with single .vue file:

        <datepicker v-model="date"></datepicker>

    import datepicker from 'vue-date'
    export default {
        data() {
            return {
                date: '2016-10-16'
        components: { datepicker }

use in browser:

    <script src="path/to/vue.js"></script>
    <script src="path/to/index.js"></script>
        <div id="app">
            <datepicker v-model="date"></datepicker>
            new Vue({
                el: '#app',
                data: {
                    date: '2016-10-16'
                components: { datepicker }



Type: String
Default: en
Optional: en(English), zh-cn(Chinese), uk(Ukrainsk), es(Spanish)

The language type. Support en(English), zh-cn(Chinese), uk(Ukrainsk) and es(Spanish) now.


Type: String
Default: 1970-01-01

The minimum date.

//pass string
<datepicker v-model="start" min="2015-01-01"</datepicker>
//or pass variable
<datepicker v-model="start" :min="variable"></datepicker>


Type: String
Default: 3016-01-01

The maximum date. Usage is same of min.


Type: Boolean
Default: false

Use range mode or not. If pass true, the binding value should be an Array containg the range start and range end. eg. ['1970-01-01', '3016-01-01']

See live demo and download source code.


This awesome script developed by showonne, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.