DatePicker 日期选择器/日期范围选择器带快捷选项

element-ui Table表格带小数的表尾合计列精度缺失问题的解决方法

element-UI的级联选择器如何开启多选模式:el-cascader-multi

1 Jan.2021

作者: 我就是个世界分类：技术&学习 » DIV+CSS 出处：本站原创

大 | 中 | 小

      <el-date-picker
        v-model="dateRange"
        type="daterange"
        align="right"
        style="margin-right: 10px;"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        format="yyyy年MM月dd日"
        value-format="yyyy-MM-dd"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

      // 日期范围选择器
      pickerOptions: {
        // 最大只能选择最近92天的时间范围
        // disabledDate(time) {
        //   return time.getTime() < Date.now() - (3600 * 1000 * 24 * 92)
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const date = new Date()
            picker.$emit('pick', [date, date])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [date, date])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.setDate(1))
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }