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

最新推荐文章于 2024-08-22 13:30:11 发布

码农小李、

最新推荐文章于 2024-08-22 13:30:11 发布

阅读量5.5k

点赞数 2

文章标签： javascript html5 html css

本文链接：https://blog.csdn.net/LiDeKang1/article/details/124075487

版权

本文总结了Element UI的dateTimePicker如何控制日期选择范围，如设置最大不超过一周，并详细介绍了如何格式化时间戳以适应后端需求。内容包括：1) 设置format和value-format属性以精确到分钟；2) 使用picker-options和data中的方法控制最大范围；3) 将汉字时间戳转换为10位数字时间戳；4) 使用moment.js将10位时间戳格式化为汉字时间；5) 解决日期组件回显问题，处理10位和13位时间戳的转换。

摘要由CSDN通过智能技术生成

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

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

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

            
            <el-date-picker
                v-model="formData.timer"
                type="datetimerange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              />

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

  data() {
  return {
      pickerMinDate: null,
      pickerMaxDate: null,
      day7: 7 * 24 * 3600 * 1000,
        pickerOptions: {
        // 限制时间
        // selectableRange: ['12:00:00 - 23:59:59'],
        //