Skip to content

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

License

Notifications You must be signed in to change notification settings

siebevh/vuejs-datepicker

 
 

Repository files navigation

Datepicker

Coverage Status

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
import Datepicker from 'vuejs-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});

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>

Use v-model for two-way binding

<datepicker v-model="state.date" name="uniquename"></datepicker>

Emits events

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

Inline always open version

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

Available props

Prop Type Default Description
value Date/String Date value of the datepicker
name String input name property
format String dd MMM yyyy Date formatting string
language String en Translation for days and months
disabled Object See below for configuration
placeholder String input placeholder text
inline Boolean to show the datepicker always open
inputClass String css class applied to the input el
wrapperClass String css class applied to the outer div
mondayFirst Boolean false To start the week on Monday

Date formatting

NB. This is not very robust at all - use at your own risk! Needs a better implementation.

Token Desc Example
d day 1
dd 0 prefixed day 01
D abbr day Mon
su date suffix st, nd, rd
M month number (1 based) 1 (for Jan)
MM 0 prefixed month 01
MMM abbreviated month name Jan
MMMM month name January
yy two digit year 16
yyyy four digit year 2016

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>

Highlight Dates

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: You can only highlight dates, that aren't disabled. Note: Both to and from properties are require to define a range of dates to highlight

<script>
var state = {
    highlighted: {
        to: new Date(2016, 0, 5), // Highlight all dates up to specific date
        from: new Date(2016, 0, 26), // Highlight all dates after specific date
        days: [6, 0], // Highlight Saturday's and Sunday's
        dates: [ // Highlight an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :highlighted="state.highlighted"></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
de German
da Danish
cs Czech
pt-br Portuguese-Brazil
vi Vietnamese
zh Chinese
ja Japanese
he Hebrew
ru Russian
sv Swedish
th Thai

About

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 65.2%
  • Vue 34.4%
  • HTML 0.4%