当前位置: 首页 > 工具软件 > date-io > 使用案例 >

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

袁高明
2023-12-01

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

NameTypeDefault ValueDescription
showBooleanfalsedate calendar model.
dateObjectrequirestartTime = {time : ‘1990-01-01’}
optionObjectoptionoption
limitObjectlimitlimit

Events

NameArgumentsDescription
cancelvalue (String)cancel
confirmvalue (String)confirm
changevalue (String)change

option

NameTypeDefault ValueDescription
typeString‘day’‘day’ or ‘min’
weekArray[‘Mo’, ‘Tu’…],week arr [‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’, ‘Su’],
monthArray[‘January’,…],month arr [‘January(一月)’, ‘February(二月)’, ‘March(三月)’,]
formatString‘YYYY-MM-DD’type == ‘day’ ? ‘YYYY-MM-DD’ : ‘‘YYYY-MM-DD HH:mm’’
colorObject{…}{ checked: ‘#F50057’,header: ‘#3f51b5’,headerText: ‘#fff’}
buttonsObject{…}{ ok: ‘OK’,cancel: ‘Cancel’ }
overlayOpacityString0.5overlay opacity : 0 - 1
dismissibleBooleantrueclick close overlay

limit

NameTypeDefault ValueDescription
limitArray[],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

 类似资料: