开发避坑短篇(5):vue el-date-picker 设置默认开始结束时间

需求

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)],
     }
}      
相关推荐
我是日安5 分钟前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan201512 分钟前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立13 分钟前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
小红15 分钟前
从乱码到清晰:深入理解字符编码的演进(ASCII到UTF-8)
前端
卓码软件测评35 分钟前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee1 小时前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿1 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨1 小时前
用 MCP 把自己的接口接入 AI
前端·node.js
小狮子安度因1 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js