vue-schedule-selector

vue-schedule-selector

vue-schedule-selector

一个友好的 when2meet 风格的网格时间选择器，使用date-fns构建。

Live example

Install

npm install vue-schedule-selector

Usage

<ScheduleSelector
              :minTime="minTime"
              :maxTime="maxTime"
              :numDays="numDays"
              :selection="schedule"
              :half-hour="halfHour"
              :auto-complete="autoComplete"
              :show-date="showDate"
              @onChange="handleDateChange"/>

import ScheduleSelector from "./components/ScheduleSelector";

export default {
  name: "schedule",
  // inheritAttrs: false,
  data() {
    return {
      minTime: 7, // 最小时间 0
      maxTime: 20, // 最大时间 23
      numDays: 7, // 显示天数
      schedule: [], // 时间
      halfHour: true, // 是否显示半小时
      autoComplete: false, // 是否开启自动补全
      showDate: false, // 是否显示星期
    };
  },
  components: {
    ScheduleSelector
  },
  mounted() {},
  methods: {
    handleDateChange(newSchedule, customizeDate) {
      // 自定义日期只显示最小时间和最大时间，不需要可以不接受第二参数 
      console.log(customizeDate);
      // 如果不赋值，则每次都是重新选择
      this.schedule = newSchedule;
    },
  }
};