npm.io
0.1.1 • Published 7 years ago

vue-select-date-time

Licence
—
Version
0.1.1
Deps
3
Size
256 kB
Vulns
1
Weekly
0
SummaryDependencyVersions

select-date-time

日期时间选择组件

how to use

npm i vue-select-date-time
import selectDateTime from 'vue-select-date-time'
import 'vue-select-date-time/lib/vue-select-date-time.css'
Vue.use(selectDateTime)
----------------------
<selectDateTime v-if="showSDT"
    @clickChoseTime="clickChoseTime"
    :chosedDateTime="chosedDateTime"
    @clickCancel="()=>{showSDT=false}">
</selectDateTime>
----------------------------
data() {
      return {
        showSDT:  false,
        chosedDateTime: ''
      }
    },
    methods: {
      clickChoseTime (dateTime) {
        this.chosedDateTime = dateTime
        this.showSDT = false
      }
    }
属性attribute 说明explain 类型type 默认default
title 标题 String ‘选择期望时间’
dateRange 显示时间范围: [yyyy-MM-dd, yyyy-MM-dd] Array [<今天>， <未来第6六天>]
canChoseRange 可选的时间范围: [yyyy-MM-dd HHss, yyyy-MM-dd HHss] Array [<当前时间>， '2100-01-01 0000']
amTimes 上午可选的时间段: ['HH:mm~HH:mm'] Array ['08:0008:30','08:3009:00',...,'11:30~12:00']
pmTimes 下午可选的时间段: ['HH:mm~HH:mm'] Array ['14:3015:00','15:0015:30',...'17:00~17:30']
chosedDateTime 默认选中的时间: yyyy-MM-dd HH:mm~HH:mm String ''
方法function 说明explain 参数args
clickChoseTime 选中的时间 the time: yyyy-MM-dd HH:mm~HH:mm
clickCancel 取消选择 null

图片效果地址： https://github.com/wuweikd/picture-folder/blob/master/vue-select-date-time/vue-select-date-time.png Image text