内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
1 Jan.2021

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

作者: 我就是个世界   分类:技术&学习 » 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])
          }
        }]
      }

内文分页: [1] [2]
分享到QQ空间
时间:19:02 评论(0) 引用(0) 阅读(78) Tags: ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情