项目场景：

在最近做的项目中需要大量的使用日期时间选择器对时间进行处理，其中最主要的还是根据已有的特定时间数据进行快捷选择操作，比如（给定的时间）最近一小时、最近两小时……

问题描述：

在element中 DateTimePicker 日期时间选择器时期时间范围的快捷选择，只是对当前时间new Date( ) 进行时间范围快捷选择的操作，对我当前的项目需求并不匹配，但是直接在Picker Options 中对 shortcuts 进行配置，只对当前时间new Data( ) 生效，而对我获取的时间配置存在error

错误书写如下：

1、直接赋值使用Data的实例方法

    // 创建时间选择快捷方式
            selectTime() {
              // var _this = this
              this.pickerOptions.shortcuts = [{
                text: '最近半小时',
                onClick(picker) {
                  const end = this.newTime
                  const start = this.newTime
                  start.setTime(start.getTime() - 1800 * 1000 * 0.5)
                  end.setTime(end.getTime() + 1800 * 1000 * 0.5)
                  picker.$emit('pick', [start, end])
                }
              },会有如下报错：

2、转化成日期对象使用Data的实例方法

    // 创建时间选择快捷方式
            selectTime() {
              // var _this = this
              this.pickerOptions.shortcuts = [{
                text: '最近半小时',
                onClick(picker) {
                  const end = new Data(this.newTime)
                  const start = new Data(this.newTime)
                  start.setTime(start.getTime() - 1800 * 1000 * 0.5)
                  end.setTime(end.getTime() + 1800 * 1000 * 0.5)
                  picker.$emit('pick', [start, end])
                }
              },获取不到接口返回的时间：

原因分析：

通过分析发现，有两方面错误：

一：this指向问题（点击查看详情）

通过观察会发现pickerOptions对象的方法shortcuts 中 this指向的是该对象pickerOptions，与外部函数selectTime()中的this指向不同。

二：对象方法的问题

接口返回过来的是一个字符串，不是Data对象，没有办法调用Data对象的方法。和object对象一样，在它的prorotype上有对应的方法，只有是它的实例才可以调用，接口返回的字符串的话不存在Data对象的原型链上的方法。

解决方案：

一：修改this指向

var _this = this

二：将字符串形式的日期转换成日期对象（示例）

var strTime=”2011-04-16”; //字符串日期格式

var date= new Date(strTime); //转换成Data();

通过以上修改就可以和element中 DateTimePicker 日期时间选择器一样，对 shortcuts 进行配置，实现时间范围快捷选择，代码展示如下：

html部分：

          <el-date-picker
            v-model="fortTimeValue" 
            size="small"
            type="datetimerange"
            :picker-options="pickerOptions" //当前时间日期选择器特有的选项参考
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" //绑定值的格式
            format="yyyy-MM-dd HH:mm:ss"
            @change="fortTimeChangeView" //用户确认选定的值时触发
            align="center"
            style="margin-bottom: 20px"
          >
          </el-date-picker>

js部分：

              //data() 中对应数据
              // 卡点时间
              fortTimeValue: [],
              // 存储当前卡点时间
              newTime: '',
              // 时间选择器参数
              pickerOptions: {
                // 时间选择快捷方式
                shortcuts: [],
                disabledDate(time) {
                  return time.getTime() > Date.now() - 8.64e6
                }
              },
        

            // methods 方法中对应处理函数
            // 创建时间选择快捷方式
            selectTime() {
              var _this = this
              _this.pickerOptions.shortcuts = [{
                text: '最近半小时',
                onClick(picker) {
                  const end = new Date(_this.newTime)
                  const start = new Date(_this.newTime)
                  start.setTime(start.getTime() - 1800 * 1000 * 0.5)
                  end.setTime(end.getTime() + 1800 * 1000 * 0.5)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近一小时',
                onClick(picker) {
                  const end = new Date(_this.newTime)
                  const start = new Date(_this.newTime)
                  start.setTime(start.getTime() - 3600 * 1000 * 0.5)
                  end.setTime(end.getTime() + 3600 * 1000 * 0.5)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近两小时',
                onClick(picker) {
                  const end = new Date(_this.newTime)
                  const start = new Date(_this.newTime)
                  start.setTime(start.getTime() - 3600 * 1000)
                  end.setTime(end.getTime() + 3600 * 1000)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近三小时',
                onClick(picker) {
                  const end = new Date(_this.newTime)
                  const start = new Date(_this.newTime)
                  start.setTime(start.getTime() - 3600 * 1000 * 1.5)
                  end.setTime(end.getTime() + 3600 * 1000 * 1.5)
                  picker.$emit('pick', [start, end])
                }
              }]
            },

最终效果：

通过以上对 shortcuts 进行配置，实现时间范围快捷选择，效果展示如下：

将后台返回的时间数据展示在时间选择器中，对该时间进行快捷操作：

点击“最近两小时快”快捷操作效果：

以上是本人在项目进行中遇到的需求问题及简单的解决方案，有些地方表述的有些浅显，希望对你有所帮助，如有不妥之处欢迎交流……

element DateTimePicker 日期时间选择器，针对接口返回的特定时间数据做“快捷时间范围选项”处理

项目场景：

问题描述：

原因分析：

解决方案：

最终效果：

猜你喜欢