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

时间：2025-02-14 07:27:28

文章目录

    • vue文件
      • html
      • data
      • methods
      • 开始和结束时间分开传给后台
        • 建立一个js文件放入下面的代码
        • 在vue页面引入
        • 传值
      • 后台分开给两个时间，存入数组回显
      • 编辑页面改变时间回显问题
        • @change改成@input
        • 借鉴

vue文件

html

<el-form-item class="" label="活动时间：" prop="activityTime">
  <el-date-picker
    v-model=""
    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 () < () - 1 * 24 * 3600 * 1000 // 选当前时间前一天之后的时间
   // return () > () // 选当前时间之前的时间
  }
},

methods

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

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

建立一个js文件放入下面的代码
// 
/**
 * @description 安全的获取数组对应下标数据
 * @param { Array } arr
 * @param { int } index
 */
export const saveGet = (arr, index) => {
  return arr[index];
  // if( arr & (arr)) {
  //   return arr[index];
  // } else {
  //   return undefined;
  // }
}
在vue页面引入
import { saveGet } from '../../assets/js/array;
传值
'start_time': saveGet(, 0),
 'end_time': saveGet(, 1),

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

let getTimeArr = new Array()
(.start_time)
(.end_time)
 = getTimeArr

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

@change改成@input
<el-form-item class="" label="活动时间：" prop="activityTime">
  <el-date-picker
    v-model=""
    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) {
	(,   'activityForm ', [ val] )
},
借鉴

/dhui/p/

相关文章