# 日期组件

选择日

选择周

选择月

选择年

选择日期范围（默认显示）

选择日期范围加00:00:00 23:59:59时分秒

快捷方式-选择日期范围

选择月份范围

快捷方式-选择月份范围

选择日期&时间

快捷方式-选择日期&时间

选择日期&时间范围

快捷方式-选择日期&时间范围

<template>
  <div class="t-date-picker-demo">
    <div class="box_content">
      <div class="box_flex">
        <div>选择日</div>
        <t-date-picker v-model="date" @change="change($event,'date','date')" />
      </div>
      <div class="box_flex">
        <div>选择周</div>
        <t-date-picker v-model="date1" type="week" @change="change($event,'week','date1')" />
      </div>
      <div class="box_flex">
        <div>选择月</div>
        <t-date-picker v-model="date2" type="month" @change="change($event,'month','date2')" />
      </div>
      <div class="box_flex">
        <div>选择年</div>
        <t-date-picker v-model="date3" type="year" @change="change($event,'year','date3')" />
      </div>
    </div>
    <div class="box_content">
      <div class="box_flex">
        <div>选择日期范围（默认显示）</div>
        <t-date-picker
          v-model="date4"
          type="daterange"
          @change="change($event,'daterange','date4')"
        />
      </div>
      <div class="box_flex">
        <div>选择日期范围加00:00:00 23:59:59时分秒</div>
        <t-date-picker
          v-model="date12"
          type="daterange"
          plusTime
          @change="change($event,'daterange','date12')"
        />
      </div>
      <div class="box_flex">
        <div>快捷方式-选择日期范围</div>
        <t-date-picker
          v-model="date5"
          type="daterange"
          isPickerOptions
          @change="change($event,'daterange','date5')"
        />
      </div>
    </div>
    <div class="box_content">
      <div class="box_flex">
        <div>选择月份范围</div>
        <t-date-picker
          v-model="date6"
          type="monthrange"
          @change="change($event,'monthrange','date6')"
        />
      </div>
      <div class="box_flex">
        <div>快捷方式-选择月份范围</div>
        <t-date-picker
          v-model="date7"
          type="monthrange"
          isPickerOptions
          @change="change($event,'monthrange','date7')"
        />
      </div>
    </div>
    <div class="box_content">
      <div class="box_flex">
        <div>选择日期&时间</div>
        <t-date-picker v-model="date8" type="datetime" @change="change($event,'datetime','date8')" />
      </div>
      <div class="box_flex">
        <div>快捷方式-选择日期&时间</div>
        <t-date-picker
          v-model="date9"
          type="datetime"
          isPickerOptions
          @change="change($event,'datetime','date9')"
        />
      </div>
    </div>
    <div class="box_content">
      <div class="box_flex">
        <div>选择日期&时间范围</div>
        <t-date-picker
          v-model="date10"
          type="datetimerange"
          @change="change($event,'datetimerange','date10')"
        />
      </div>
      <div class="box_flex">
        <div>快捷方式-选择日期&时间范围</div>
        <t-date-picker
          v-model="date11"
          type="datetimerange"
          isPickerOptions
          :default-time="['12:00:00', '08:00:00']"
          @change="change($event,'datetimerange','date11')"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      date1: '',
      date2: '',
      date3: '',
      date4: ['2022-12-09', '2022-12-31'],
      date5: '',
      date6: '',
      date7: '',
      date8: '',
      date9: '',
      date10: '',
      date11: '',
      date12: '',
      typeTxt: {
        date: '日期',
        week: '周',
        month: '月',
        year: '年',
        daterange: '日期范围',
        monthrange: '月份范围',
        datetime: '日期和时间',
        datetimerange: '日期和时间点范围',
      }
    }
  },
  // 方法
  methods: {
    change(date, type, value) {
      console.log(`change选择${this.typeTxt[type]}返回值是：`, date)
      console.log(`v-model绑定的值是：`, this[value])
    }
  }
}
</script>
<style lang="scss" scoped>
.t-date-picker-demo {
  overflow-y: auto;
  max-height: 300px;
  .box_content {
    display: flex;
    padding: 10px;
    border: 1px dashed #ccc;
    margin-top: 10px;
    flex-wrap: wrap;
    &:first-child {
      margin-top: 0;
    }
  }
  .box_flex {
    display: flex;
    flex-direction: column;
    margin-right: 5px;
  }
}
</style>

# TDatePicker 参数配置

# 1、简介：基于 ElementUI DatePicker DateTimePicker 组件的二次封装，取决于 type 值

代码示例：

<t-date-picker v-model="date" />

# 2、t-date-picker（Attributes）继承 DatePicker DateTimePicker 的 Attributes

参数	说明	类型	默认值
v-model	绑定值	[String, Date, Array]	-
plusTime	日期范围是否显示 00:00:00 23:59:59 时分秒	Boolean	false
type	时间类型（继承 element DatePicker DateTimePicker）	String	-
pickerOptions	当前时间日期选择器特有的选项	object	-
isPickerOptions	是否开启自带快捷方式	Boolean	false

# 3、type 类型如下：

week 周；month 月；year 年；dates 多个日期；months 多个月；years 多个年；daterange 日期范围；monthrange 月份范围;datetime 日期和时间点;datetimerange 日期和时间点范围

# 4、pickerOptions（Attributes）

参数	说明	类型	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法	Object[]	-
disabledDate	设置禁用状态，要求返回 Boolean	Function	-
cellClassName	设置日期的 className	String	-
pickerOptions	当前时间日期选择器特有的选项（快捷方式）	Function(Date)	-
firstDayOfWeek	周起始日	Number	7

# 5、events

事件名	说明	返回值
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致，可受 value-format 控制

← 步骤组件弹窗组件 →