element-ui 获取时间时间格式化默认开始结束时间时间快捷方式（最近一小时今天昨天最近一周等）

最新推荐文章于 2024-10-20 21:50:24 发布

原创最新推荐文章于 2024-10-20 21:50:24 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #时间空间

本文介绍了一个基于Element UI的订单时间筛选组件实现，该组件使用了moment.js进行日期时间的格式化处理，提供了丰富的快捷时间选择功能，如最近一小时、今天、昨天、最近一周、最近一个月和最近三个月。

          <el-form-item label="下单时间：">
                <el-date-picker
                  v-model="createTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss" 
                  :default-time="['00:00:00', '23:59:59']"
                  :time-arrow-control="true"
                  :picker-options="pickerOptions"
                  @change="getStime">
                </el-date-picker>
              </el-form-item>

      pickerOptions: {
          shortcuts: [
           {
            text: '最近一个小时',
            onClick(picker) {
              const end = `${moment().subtract(0, 'm').format('YYYY-MM-DD HH:mm:ss')}`
              const start = `${moment().subtract(60, 'm').format('YYYY-MM-DD HH:mm:ss')}`;
              console.log('end:',end ,start);
              picker.$emit('pick', [start, end]);
            }
           }, 
           {
            text: '今天',
            onClick(picker) {
              const end = `${moment().subtract(0, 'days').format('YYYY-MM-DD')} 23:59:59`
              const start = `${moment().subtract(0, 'days').format('YYYY-MM-DD')} 00:00:00`;
              console.log('end:',end ,start);
              picker.$emit('pick', [start, end]);
            }
           }, 
           {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              const end = `${moment().subtract(1, 'days').format('YYYY-MM-DD')} 23:59:59`
              const start = `${moment().subtract(1, 'days').format('YYYY-MM-DD')} 00:00:00`;
              console.log('end:',end ,start);
              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]);
            }
          }]
        },

    getStime(val) {
      if (val) {
        this.createTime = val;
        this.params.ordertimestart = this.createTime[0].toString();
        this.params.ordertimeend = this.createTime[1].toString();
      } else {
        this.params.ordertimestart  = '';
        this.params.ordertimeend = '';
      }
    }

import moment from 'moment'

  created() {

    let oldDate = moment().subtract(3, 'months').format('YYYY-MM-DD') + ' 00:00:00';
    let today = moment().subtract(0, 'days').format('YYYY-MM-DD') + ' 23:59:59' ;
    this.createTime = [
      oldDate , today
    ];

    this.params.ordertimestart = oldDate;
    this.params.ordertimeend = today;
}