开发避坑短篇（5）：vue el-date-picker 设置默认开始结束时间

帧栈2025-07-25 17:15

需求

el-date-picker 日期时间选择器如何设置默认开始时间为00:00:00，结束时间为23:59:59？

解决办法

可以通过动态绑定default-time属性来指定默认的开始时间和结束时间。

（1）vue3写法

模板页面表单

vue 复制代码

<el-form-item label="创建时间" prop="time">
    <el-date-picker
      start-placeholder="开始时间"
      range-separator="至"
      end-placeholder="结束时间"
      type="datetimerange"
      v-model="queryParams.time"
      value-format="YYYY-MM-DD HH:mm:ss"
      :default-time="queryParams.defaultTimeArr"
    ></el-date-picker>
</el-form-item>

响应式数据定义

vue 复制代码

const data = reactive({
  queryParams: {
	...
	time:[],
    defaultTimeArr:[new Date(0,0,0,0,0,0), new Date(0,0,0,23,59,59)],
  },
});

（2）vue2写法

模板页面表单

vue 复制代码

<el-form-item label="生成时间" prop="time">
    <el-date-picker
      end-placeholder="结束日期"
      range-separator="至"
      start-placeholder="开始日期"
      type="datetimerange"
      v-model="formData.time"
      value-format="YYYY-MM-DD HH:mm:ss"
      :default-time="defaultTimeArr"
    ></el-date-picker>
</el-form-item>

变量定义

vue 复制代码

data () {
    return {
	  ...
	  time:[],
      defaultTimeArr:[new Date(0,0,0,0,0,0), new Date(0,0,0,23,59,59)],
     }
}