vuejs-date-calendar

A date-calendar for mobile (推荐手机浏览器打开)

Demo

https://zhangyongwnag.github.io/vuejs-date-calendar/example/#/Home

Installation

npm install --save vuejs-date-calendar

or

yarn add vuejs-date-calendar

import Vue from 'vue'
import DateCalendar from 'vuejs-date-calendar'

Vue.use(DateCalendar)

Usage

Once installed, it can be used in a template as simply as:

<v-date-calendar
    v-model="show"
    :date="startTime"
    :option="option"
    :limit="limit"
    @cancel="cancel"
    @confirm="confirm"
    @change="change">
</v-date-calendar>

Api

Name	Type	Default Value	Description
show	Boolean	false	date calendar model.
date	Object	require	startTime = {time : '1990-01-01'}
option	Object	option	option
limit	Object	limit	limit

Events

Name	Arguments	Description
cancel	value (String)	cancel
confirm	value (String)	confirm
change	value (String)	change

option

Name	Type	Default Value	Description
type	String	'day'	'day' or 'min'
week	Array	['Mo', 'Tu'...],	week arr ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
month	Array	['January',...],	month arr ['January(一月)', 'February(二月)', 'March(三月)',]
format	String	'YYYY-MM-DD'	type == 'day' ? 'YYYY-MM-DD' : ''YYYY-MM-DD HH:mm''
color	Object	{...}	{ checked: '#F50057',header: '#3f51b5',headerText: '#fff'}
buttons	Object	{...}	{ ok: 'OK',cancel: 'Cancel' }
overlayOpacity	String	0.5	overlay opacity : 0 - 1
dismissible	Boolean	true	click close overlay

limit

Name	Type	Default Value	Description
limit	Array	[],	choice date cut {type: 'fromto',from: '1900-01-01',to: '2019-01-01'}