Datepicker

A datepicker Vue component. Compatible with Vue 1.x and Vue 2.x

Demo

http://www.webpackbin.com/N1vgz1XRb

Install

npm install vuejs-datepicker --save

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm test

Usage

<datepicker></datepicker>

value prop if passed should be a Date object

<script>
var state = {
    date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

support name attribute for normal html form submission

<datepicker :value="state.date" name="uniquename"></datepicker>

Emits events

<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction">

Inline always open version

<datepicker :inline="true"></datepicker>

Disabled Dates

Dates can disabled in a number of ways.

<script>
var state = {
    disabled: {
        to: new Date(2016, 0, 5), // Disable all dates up to specific date
        from: new Date(2016, 0, 26), // Disable all dates after specific date
        days: [6, 0], // Disable Saturday's and Sunday's
        dates: [ // Disable an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :disabled="state.disabled"></datepicker>

Translations

<datepicker language="es"></datepicker>

Available languages

Abbr	Language
en	English	Default
es	Spanish
fi	Finnish
fr	French
hr	Croatian
it	Italian
nl	Dutch
da	Danish
cs	Czech
pt-br	Portuguese-Brazil
vi	Vietnamese
zh	Chinese
ja	Japanese
he	Hebrew