日期范围组件

---

基本模式

-

选择月份

-

选择时间

-

限制可选择日期范围

-

<template>
  <t-antd-layout-page>
    <t-antd-layout-page-item>
      <div>基本模式</div>
      <t-antd-date-picker
        v-model="selectDay"
        format="YYYY-MM-DD"
        allowClear
        @change="dateChange($event,'day')"
      />
      <div>选择月份</div>
      <t-antd-date-picker type="month" v-model="selectMonth" @change="dateChange($event,'month')" />
      <div>选择时间</div>
      <t-antd-date-picker show-time v-model="selectTime" @change="dateChange($event,'time')" />
      <div>限制可选择日期范围</div>
      <t-antd-date-picker
        show-time
        :disabledRange="disabledRange"
        @change="dateChange($event,'optionalDate')"
      />
    </t-antd-layout-page-item>
  </t-antd-layout-page>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      selectDay: [null, null],
      selectMonth: [],
      selectTime: [],
      disabledRange: [moment("2020-12-01"), moment()]
    }
  },
  methods: {
    dateChange(date, type) {
      switch (type) {
        case 'day':
          console.log('基本模式_开始时间', moment(date[0]).format("YYYY-MM-DD"))
          console.log('基本模式_结束时间', moment(date[1]).format("YYYY-MM-DD"))
          break;
        case 'month':
          console.log('选择月份_开始时间', moment(date[0]).format("YYYY-MM"))
          console.log('选择月份_结束时间', moment(date[1]).format("YYYY-MM"))
          break;
        case 'time':
          console.log('选择时间_开始时间', moment(date[0]).format("YYYY"))
          console.log('选择时间_结束时间', moment(date[1]).format("YYYY"))
          break;
        case 'optionalDate':
          console.log('限制可选择日期范围_开始时间', moment(date[0]).format("YYYY"))
          console.log('限制可选择日期范围_结束时间', moment(date[1]).format("YYYY"))
          break;
      }
    }
  }
}
</script>

显示代码

TAntdDatePicker——日期范围组件参数配置

---

代码示例

  <t-antd-date-picker v-model="selectDay" @change="dateChange($event,'optionalDate')"/>

配置参数（Attributes）

参数	说明	类型	默认值
value(v-model)	组件的值，保持空值可传 [ null, null ]	[Moment, Moment]	-
format	设置日期格式，配置参考 moment.js (opens new window)	string	"YYYY-MM-DD HH:mm:ss"
type	日期面板的状态，可选值："day"、"month"。可按天、月选择时间范围。（后续支持季度、年）	string	"day"
showTime	增加时间选择功能，配置参考[Antd DatePicker组件文档]	boolean,object	false
allowClear	支持清空	boolean	false
langest	最长范围限制，根据类型自动切换。如'day'、'month'分别限制最长天与最长月	boolean,number	false
inputReadOnly	设置输入框为只读	boolean	false
placeholder	设置输入框placeholder	Array	['开始时间', '结束时间']
disabledRange	限制选择的时间范围	[ Moment boolean, Moment boolean ]	无

事件（events）

事件名	说明	回调参数
change	范围发生变化时调用	Function(date: [Moment, Moment])