开发避坑短篇(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)],
     }
}      
相关推荐
葱头的故事1 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia1 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心2 小时前
CSS 样式用法大全
前端·css·1024程序员节
012925202 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
2501_929382652 小时前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏
非凡ghost2 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
非凡ghost2 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端