element piceroptions 设置月范围

Element UI 是基于 Vue.js 的框架，提供了一系列 UI 组件，其中 Datepicker 是一款常用的日期选择器组件，它提供了一些方便的可配置选项，如 piceroptions。

piceroptions 用于设置月范围，其类型为对象。具体包含如下属性：

1. disabledDate

禁用某些日期。类型为函数，参数为日期，返回值为 Boolean 类型，表示是否禁用此日期。例如，可以禁用所有周末和法定节假日：

disabledDate(time) {
  const day = time.getDay()
  // 禁用周末
  return day === 0 || day === 6
  // 或者禁用法定节假日
  return time.getTime() === new Date(2021, 0, 1).getTime()
}

2. shortcuts

快捷选项，类型为数组，其中每个元素为对象，包含两个属性：text 和 onClick。text 表示选项名称，onClick 为选项被选择时的回调函数，回调函数接收两个参数：开始日期和结束日期。例如，可以添加一个名称为 "最近一周" 的快捷选项：

shortcuts: [
  {
    text: "最近一周",
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit("pick", [start, end])
    }
  }
]

3. firstDayOfWeek

每周的第一天。类型为数字，表示星期几，取值为 1 到 7。例如，设置每周的第一天为周一：

firstDayOfWeek: 1

4. disabledTime

禁用某些时间。类型为函数，参数为日期（年月日已确定），返回一个数组，包含两个元素分别表示可选的最早时间和最晚时间。例如，禁用所有早于 9 点或晚于 18 点的时间：

disabledTime(time) {
  const hour = time.getHours()
  const minute = time.getMinutes()
  return [
    new Date(2021, 10, 1, 0, 0), // 最早时间为当天 0 点 0 分
    new Date(2021, 10, 1, hour < 9 ? 9 : 18, minute) // 最晚时间为当天 9 点或18点之后（取决于当前时间）
  ]
}

通过 piceroptions 设置月范围等选项，可以更好地满足用户的需求，提高用户体验。