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

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

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

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

            <el-date-pickerv-model="formData.timer"type="datetimerange"unlink-panelsrange-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'],// 限制日期// disabledDate: this.disabledDateonPick: ({ minDate }) => {if (minDate && this.pickerMinDate) {this.pickerMinDate = null;} else if (minDate) {this.pickerMinDate = minDate.getTime();}},disabledDate: (time) => {if (this.pickerMinDate) {return time.getTime() > this.pickerMinDate + this.day7 || time.getTime() < this.pickerMinDate - this.day7;}return false;}}}}

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

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

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

 // 计算属性computed: {searchForm() {return {time_from: new Date(this.form.timer[0]).getTime() / 1000 || '',time_to: new Date(this.form.timer[1]).getTime() / 1000 || ''};}},

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

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

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

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

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了

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

element ui DatePicker 日期选择器限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期 time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒 ...
element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期
element的日期范围选择器快捷选择今日,昨日,本周,上周,本月,上个月,禁止选择当前日期之后的日期 <template><div class="card-data&qu ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
element ui DatePicker 日期选择器限制只能选择今天之前或者之后
<el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker ...
【Element UI】日期选择器el-date-picker 默认选中当前日期==＞不可选当日之前的日期
一个人能否合理表达自己的攻击性是健康与否的重要标准. 参考Element UI Element - The world's most popular Vue UI framework 目录 1.默认 ...
element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期
vue3使用element-plus的DateTimePicker 日期时间选择器组件时,禁止选择当日之前的日期. 在el-date-picker使用disabled-date: <el-dat ...
element 时间选择器禁止选择以前或以后的时间
<el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-o ...
vue2 + elementui 日期时间选择器禁止选择当前时间之前的日期及时间，并添加相应校验规则
项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...
使用element ui 的日期插件搜索清空时报错
1.先贴上一张图,供您看一看 Error in v-on handler: "TypeError: Cannot read property '0' of null" 我这报错报了 ...

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

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

最新文章

热门文章