element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）

vue文件

html

<el-form-item class="" label="活动时间：" prop="activityTime">
  <el-date-picker
    v-model="activityForm.activityTime"
    type="datetimerange"
    @change="timeChange"
    value-format="yyyy-MM-dd HH:mm:ss"
    :clearable="false"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
</el-form-item>

data

//return
activityForm: {
	activityTime: [],
},
//校验
rules: {
	activityTime: [
	   { required: true, message: '请选择活动时间', trigger: 'change' }
	 ],
},
//时间范围控制
pickerOptions: {
  disabledDate (time) {
    return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000 // 选当前时间前一天之后的时间
   // return time.getTime() > Date.now() // 选当前时间之前的时间
  }
},

methods

//时间改变
timeChange (val) {
	 var st = new Date(val) * 1000 / 1000
	 if (st < Date.now()) {
	   this.activityForm.activityTime = new Date()
	 }
},

开始和结束时间分开传给后台

建立一个js文件放入下面的代码

// arrayUtil.js
/**
 * @description 安全的获取数组对应下标数据
 * @param { Array } arr
 * @param { int } index
 */
export const saveGet = (arr, index) => {
  return arr[index];
  // if( arr & Array.isArray(arr)) {
  //   return arr[index];
  // } else {
  //   return undefined;
  // }
}

在vue页面引入

import { saveGet } from '../../assets/js/array;

传值

'start_time': saveGet(self.activityForm.activityTime, 0),
 'end_time': saveGet(self.activityForm.activityTime, 1),

后台分开给两个时间，存入数组回显

let getTimeArr = new Array()
getTimeArr.push(data.result.start_time)
getTimeArr.push(data.result.end_time)
this.activityForm.activityTime = getTimeArr

编辑页面改变时间回显问题

@change改成@input

<el-form-item class="" label="活动时间：" prop="activityTime">
  <el-date-picker
    v-model="activityForm.activityTime"
    type="datetimerange"
    @input="timeEditChange"
    value-format="yyyy-MM-dd HH:mm:ss"
    :clearable="false"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
</el-form-item>

//时间改变
timeEditChange (val) {
	Vue.set(this.activityForm,   'activityForm ', [ val] )
},

借鉴

https://www.cnblogs.com/dhui/p/13322290.html

最后

以上就是秀丽超短裙为你收集整理的element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）的全部内容，希望文章能够帮你解决element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。