elementplus DateTimePicker 日期范围选择器 设置默认时间范围为当前月的起始时间到结束时间


代码如下:

html 复制代码
<el-date-picker
      v-model="value"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime"
/>
javascript 复制代码
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'

获取当前月的起始 结束日期

javascript 复制代码
const getCurrentDate = ():Array<string> =>{
  let currentTimeRange = [] as Array<string>;
  const currentDate = new Date();

  // 获取当前月份
  const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始,所以需要加 1

  // 获取当前月份的起始时间
  const startTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, '0')}-01 00:00:00`;

  // 获取当前月份的终止时间
  const lastDay = new Date(
    currentDate.getFullYear(),
    currentMonth,
    0
  ).getDate();

  const endTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, '0')}-${lastDay.toString().padStart(2, '0')} 23:59:59`;
  currentTimeRange = [startTime,endTime]
  
  //返回当前月的起始 结束日期
  return currentTimeRange
}
相关推荐
铁皮饭盒21 分钟前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
weixin_BYSJ19872 小时前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php
Wect4 小时前
TypeScript 完全指南
前端·javascript·typescript
张元清4 小时前
React useDeepCompareEffect:修复 useEffect 的对象依赖问题(2026)
javascript·react.js
phltxy4 小时前
LangChain_v1_Agent快速开发和更新说明
前端·javascript·langchain
Cobyte4 小时前
通过 Vite 运行手写的模板编译器
前端·javascript·vue.js
用户298698530145 小时前
React 前端处理 Excel 工作表复制的技术实践
javascript·react.js·excel
光影少年5 小时前
RN原生交互 & 桥接
前端·javascript·react native·react.js·前端框架
用户526835677905 小时前
云原生运维实践:构建 Prometheus + 自定义 Webhook 的硬件声光告警闭环
javascript
GuWenyue5 小时前
踩坑无数!吃透useState 3个核心技巧,彻底解决状态旧值、性能卡顿问题
前端·javascript·react.js