vue-date's Introduction

vue-datepicker

datepicker component for Vue.js, already support Vue.js 2.x, the Vue.js 1.x version is on branch vue-1.x.

Live Demo is here(browser) and here(webpack)

Installation

npm install vue-date --save

Usage

use with single `.vue` file:

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

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

use in browser:

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

Props

language

Type: `String`

Default: `en`

Optional: `en(English)`, `ch(Chinese)`

The language type. Only support en(English) and ch(Chinese) now.

min

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>

max

Type: `String`

Default: `3016-01-01`

The maximum date. Usage is same of min.

range

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']