Recently, the company needs to do a small program for conference room reservation. After understanding the general needs, it began to develop

Uni-app is used to develop small programs, simple violence, vUE can be used directly

After the development, feel the choice of time component is good, consider open source, have the need to help save some time, go home early

Take a look at the components, online preview poke me

What does it do?

  1. You can select a date range, for example: [from today – 7 days from now]
  2. You can set the start time and end time. For example, [8:00-22:00]
  3. According to the scheduled list returned by the interface, display to the component, the scheduled time is prohibited to select, so that there will be no scheduled overlap
  4. Others can be installed after their own experience

How to use

npm install select-time-range --save
Copy the code
<template>
  <div id="app">
    <select-time @timeRange="getTimeRange" @change="handleChange" :data="data" :range="range" :start-time="startTime" :end-time="endTime"></select-time>

    <p>Date} {{selectdate.start_time}} -- {{selectdate.end_time}}</p>
  </div>
</template>

import selectTime from 'select-time-range'

components: {
    selectTime
}

data () {
    return {
      range: '7'.startTime: '7'.endTime: '23:00'.selectDate: {},
      data: []}},methods: {
    handleChange (e) {
      this.data = [
        {
          'name': 'weeks'.'start_time': '7:30 p.m..'end_time': '9'
        }]
    },
    getTimeRange (value) {
      this.selectDate = value
    }
}

Copy the code

For details about events and attributes, you can view select-time-range on Github