vue2 中 使用el-date-picker 类型为datetimerange,限制时间不能选今天以前的。以及不能回显还有回显后修改不能生效的问题!
对组件时间回显不能修改成功的问题,还有就是组件需要的格式做了处理。
·
1.这是HTML代码
<el-form-item prop="strtime">
<el-date-picker v-model="value1"
type="datetimerange" @change="change"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
js代码,首先通过change事件将获取到的值进行赋值以及绑定值为:
export default {
components: { VueEditor },
data() {
return {
...
value1: [], //组件绑定值
formData: {
endTime: null,
startTime: null
},
}
}
}
// 时间范围选择改变事件
change(e) {
if (e[0] < new Date().getTime()) {
e[0] = new Date().getTime()
}
if (e[1] < new Date().getTime()) {
e[1] = new Date().getTime()
}
var date = new Date(e[0]);
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + (date.getDate()) + ' ' : date.getDate() + ' '
var h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
var m = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
// var s = date.getSeconds() <10 ? '0'+(date.getSeconds()):date.getSeconds();
let date1 = Y + M + D + h + m
var date = new Date(e[1]);
var Y1 = date.getFullYear() + '-';
var M1 = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D1 = date.getDate() < 10 ? '0' + (date.getDate()) + ' ' : date.getDate() + ' '
var h1 = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
var m1 = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
// var s1 = date.getSeconds() <10 ? '0'+(date.getSeconds()):date.getSeconds();
let date2 = Y1 + M1 + D1 + h1 + m1
//将上面的拼接到一块
this.$set(this.formData, 'startTime', date1)
this.$set(this.formData, 'endTime', date2)
// console.log(a);
},
对后端返回的时间处理:
后端返回格式:
处理
这是整个请求代码
// 获取详情
getDetails(id) {
return new Promise((resolve, reject) => {
getAdvData({ id: id })
.then((res) => {
this.formData = res.data
// 开始时间 年月日
let yearDate = res.data.startTime.split(' ')[0]
let sY = yearDate.split('-')[0]
let sM = yearDate.split('-')[1]
let sD = yearDate.split('-')[2]
// 开始时间 时分
let houseDate = res.data.startTime.split(' ')[1]
let SH = houseDate.split(':')[0]
let SM = houseDate.split(':')[1]
// 结束时间
let endDate = res.data.endTime.split(' ')[0]
let eY = endDate.split('-')[0]
let eM = endDate.split('-')[1]
let eD = endDate.split('-')[2]
// 开始时间 时分
let houseEnd = res.data.endTime.split(' ')[1]
let He = houseEnd.split(':')[0]
let Me = houseEnd.split(':')[1]
this.value1 = [new Date(sY, sM - 1, sD, SH, SM), new Date(eY, eM - 1, eD, He, Me)]
// if (res.data.activityStatus == 1 || res.data.activityStatus == 2 || res.data.activityStatus == 4) {
// this.radio = 1
// } else {
// this.radio = 0
// }
if (res.code == 0) {
resolve(res.data)
}
}).catch((err) => {
this.tableloading = false;
})
})
},
时间限制 这个8.64e7被减掉是因为需要选今天的日期时间
export default {
data(){
return {
...
pickerOptions: {
// 限制时间不让选择今天以前的
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
},
},
}
}
}
作为一个新手,写代码冗余很多,希望能帮助到各位,如有修改的地方,请指出,谢谢啦,第一次创作,还请大家多多鼓励。
更多推荐
已为社区贡献1条内容
所有评论(0)