最近公司內(nèi)部需要做個會議室預(yù)定的小程序，了解大概的需求之后，就開始上手開發(fā)

小程序直接用 uni-app 開發(fā)，簡單暴力，會vue的直接能上手?jǐn)]了

開發(fā)完以后，覺得選擇時間組件還不錯，就考慮開源了，有需求的就可以幫忙省點時間，早點下班回家

先看一下組件, 在線預(yù)覽 戳我

有什么功能

1. 可以選擇日期范圍，例如： [今天開始 - 7天之后]
2. 可以設(shè)置開始時間和結(jié)束時間 例如：[8:00 - 22:00]
3. 根據(jù)接口返回的預(yù)定列表，顯示到組件中，已預(yù)定的時間禁止選中，這樣就不會預(yù)定重疊了
4. 其它的可以安裝之后自己去體驗

怎么使用

npm install select-time-range --save
復(fù)制代碼

<template>
  <div id="app">
    <select-time @timeRange="getTimeRange" @change="handleChange" :data=http://www.wxapp-union.com/"data" :range="range" :start-time="startTime" :end-time="endTime"></select-time>

    <p>當(dāng)前選擇的日期為: {{selectDate.date}} 【{{selectDate.start_time}} -- {{selectDate.end_time}}】</p>
  </div>
</template>

import selectTime from 'select-time-range'

components: {
    selectTime
}

data () {
    return {
      range: '7',
      startTime: '7:00',
      endTime: '23:00',
      selectDate: {},
      data: []
    }
  },
methods: {
    handleChange (e) {
      this.data = http://www.wxapp-union.com/[
        {
          'name': '周會',
          'start_time': '7:30',
          'end_time': '9:00'
        }]
    },
    getTimeRange (value) {
      this.selectDate = value
    }
}

復(fù)制代碼

具體的事件和屬性，可以到github上查看 select-time-range