vue选择时间日期日历插件 : vuejs-date-calendar

vue移动端时间日期日历选择插件

Demo（ 推荐手机端打开 ）

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

一、下载

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)

三、使用

<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’}

五、链接

NPM : https://www.npmjs.com/package/vuejs-date-calendar
GitHub：https://github.com/zhangyongwnag/vuejs-date-calendar