Calendar component made with Vue 2.0

vue2-calendar

A datepicker component vue 2 calendar, which supports lunar or date events. Many options can be used to configure these events or appearance.

Example:

Installation

Download or clone the repo and run npm install to install its dependencies.

Usage

script 

import Calendar from 'components/Calendar'
export default {
  name: 'app',
  data () {
    return {
      disabled: [0],
      value: '2016-12-19',
      format: 'yyyy-MM-dd',
      clear: true,
      placeholder: 'placeholder is displayed when value is null or empty'
    }
  },
  components: {
    Calendar
  }
}

Bind the options to your template

template 

  <div id="app">
    <calendar :value="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" ></calendar>
  </div>

disabled array can contain the days of the week the user won't be able to pick in the calendar.

Options

  • value: Value of the input DOM
  • width: '200px' Width of the input DOM
  • format: The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
  • disabled-days-of-week: Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
  • clear-button: If true shows an × shaped button to clear the selected date.
  • placeholder: Placeholder to put on the input field when no date (null or empty) is set

More info on GitHub.

Inspired by vue-strap datepicker component.