element ui dataTimePiker日期时间选择器控制选择范围和时间转换

一：这里设置的是控制日期选择范围最大不超过一周

1：如果想要控制时间的单位精确到分的话可以加上 format="yyyy-MM-dd HH:mm value-format="yyyy-MM-dd HH:mm" 这两个属性。

2.html部分 设置:picker-options="pickerOptions" 这个属性开启格式化日期

1.  
    
2.  
   <el-date-picker
3.  
   v-model="formData.timer"
4.  
   type="datetimerange"
5.  
   unlink-panels
6.  
   range-separator="至"
7.  
   start-placeholder="开始日期"
8.  
   end-placeholder="结束日期"
9.  
   :picker-options="pickerOptions"
10.  
    />

3.js部分 这里是写在data里面  我这里控制的最大范围为一周

1.  
   data() {
2.  
   return {
3.  
   pickerMinDate: null,
4.  
   pickerMaxDate: null,
5.  
   day7: 7 * 24 * 3600 * 1000,
6.  
   pickerOptions: {
7.  
   // 限制时间
8.  
   // selectableRange: ['12:00:00 - 23:59:59'],
9.  
   // 限制日期
10.  
    // disabledDate: this.disabledDate
11.  
    onPick: ({ minDate }) => {
12.  
    if (minDate && this.pickerMinDate) {
13.  
    this.pickerMinDate = null;
14.  
    } else if (minDate) {
15.  
    this.pickerMinDate = minDate.getTime();
16.  
    }
17.  
    },
18.  
    disabledDate: (time) => {
19.  
    if (this.pickerMinDate) {
20.  
    return time.getTime() > this.pickerMinDate this.day7 || time.getTime() < this.pickerMinDate - this.day7;
21.  
    }
22.  
    return false;
23.  
    }
24.  
    }
25.  
    }
26.  
    }

二：格式化传递给后端的时间戳

 这里组件自带的打印时间为汉字这种类型的

可以采取一个计算属性把汉字转换为10位的数字时间戳传给后端 这里/1000是转换为10位的 如果后端要求13位时间戳 则 这里可不用/1000

1.  
   // 计算属性
2.  
   computed: {
3.  
   searchForm() {
4.  
   return {
5.  
   time_from: new Date(this.form.timer[0]).getTime() / 1000 || '',
6.  
   time_to: new Date(this.form.timer[1]).getTime() / 1000 || ''
7.  
   };
8.  
   }
9.  
   },

打印出来就是这样的时间戳

 三，将时间戳格式化为页面显示为汉字的时间

1.当后端返回的时间戳为10位的时候 可以全局下个moment.js时间格式化的包 然后再main.js全局注册一个$formatUnixTime的方法。

1.  
   Vue.prototype.$formatUnixTime = function (time, format) {
2.  
   return Number(time) === 0 ? '' : moment.unix(time).format(format || 'YYYY-MM-DD HH:mm:ss');
3.  
   };

2接下来在组建中就可以用

this.$formatUnixTime（时间戳） 将日期转为汉字的啦 如下图

四，处理日期组件回显的问题

这里分两种情况

1.如果现在日期组件绑定的timer数组里面为两个时间戳的话的话 ，则可以直接绑定 但是我这时候后端返回的是10位的时间戳 所以我需要将时间戳*1000不然回显的时间就是1970年了

将两个10位的时间戳分别*1000则可以达到正常时间，如果是13位时间戳 则可以不用*10

 这是*1000后正常的

 这是没有*1000的 则出现了10位时间戳 日期位1970的错误情况

2.如果后端返回的直接是一个数组里面两个汉字的日期的话  我们直接渲染在页面上就可以 ，则回显日期的话可以采取下面的方法  下面'2025-03-30 16:28:52' 这是我写死的 只是做测试的 工作中可以从上面的row里面拿到真实返回汉字的时间，将汉字转换为时间戳就好 这里时间戳直接是13位的正确的 不用*1000了

这篇好文章是转载于：学新通技术网