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
}
相关推荐
爱健身的小刘同学1 天前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头1 天前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
黛色正浓1 天前
leetCode-热题100-贪心合集(JavaScript)
javascript·算法·leetcode
拾荒的小海螺1 天前
开源项目:Three.js 构建 3D 世界的工具库
javascript·3d·开源
还债大湿兄1 天前
huggingface.co 下载有些要给权限的模型 小记录
开发语言·前端·javascript
叶落无痕521 天前
Electron应用自动化测试实例
前端·javascript·功能测试·测试工具·electron·单元测试
H@Z*rTE|i1 天前
elementUi 当有弹窗的时候提示语被覆盖的问题
前端·javascript·elementui
阿奇__1 天前
vue2+elementUI table多个字段排序
前端·javascript·elementui
hellokatewj1 天前
React Hooks 全解:原理、API 与应用场景
前端·javascript·react.js
江湖yi山人1 天前
生产环境的log,上传到开发者的本地服务器
javascript·python