vue 2 日历 / 日期选择 componentcalendar，datepicker，支持事件日历，农历等

vue 2 calendar, datepicker component which supported lunar or date event

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 run unit

# run all tests
npm test

Screenshot

Usage

Component path:

src/components/Calendar.vue

use slot to render async data

  
    
        ${{evt.content}} ↓

Props

Name	Type	Default	Description
value	`String`	''	Value of the input DOM
width	`String`	'200px'	Width of the input DOM
format	`String`	`MMMM/dd/yyyy`	The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-week	`Array`		Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
clear-button	`Bollean`	false	If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.
placeholder	`String`		Placeholder to put on the input field when no date (null or empty) is set
hasInput	`Boolean`	true	Default is has-input style, if don't have input will show pane directly
pane	`Number`	1	pane count
borderWidth	`Number`	2	This value is for calculating the pane width
onDayClick	`Function`		Only for `hasInput` set false
specialDays	`Object`		To repalce the day text
changePane	`Function`		For pane change parameter (year, month, pane) month[0,11], demo `/src/modules/Docs.vue`

  props: {
    value: {
      type: String
    },
    format: {
      default: 'MM/dd/yyyy'
    },
    disabledDaysOfWeek: {
      type: Array,
      default () {
        return []
      }
    },
    width: {
      type: String,
      default: '200px'
    },
    clearButton: {
      type: Boolean,
      default: false
    },
    lang: {
      type: String,
      default: navigator.language
    },
    placeholder: {
      type: String
    },
    hasInput: {
      type: Boolean,
      default: true
    },
    pane: {
      type: Number,
      default: 1
    },
    borderWidth: {
      type: Number,
      default: 2
    },
    onDayClick: {
      type: Function,
      default: function () {}
    },
    changePane: {
      type: Function,
      default: function () {}
    },
    specialDays: {
      type: Object,
      default: function () {
        return {}
      }
    }
  }

Credits

Inspired by vue-strap datepicker component.

For detailed explanation on how things work, checkout the guide and docs for vue-loader.