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
}
相关推荐
子兮曰12 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
强尼银手13 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript
总要学点什么14 小时前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
OpsEye15 小时前
混合云 AI 架构,如何统一做敏感内容拦截?
javascript·ai编程
Funlang16 小时前
给机器写的 JavaScript 造个笼子
开发语言·javascript·ecmascript
古茗前端团队17 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen17 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
vipxieliang21 小时前
JavaScript 迭代器与生成器:控制异步与惰性求值
前端·javascript
Hilaku21 小时前
Event Loop 这篇你看完就不用再看别的了!
前端·javascript·程序员
晓得迷路了1 天前
栗子前端技术周刊第 153 期 - Vitest 5.1、Remix v3.2、Node.js 27 Alpha...
前端·javascript·vite