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
}
相关推荐
吴声子夜歌14 分钟前
ES6——Iterator和for...of循环详解
前端·javascript·es6
小李子呢021118 分钟前
前端八股3---ref和reactive
开发语言·前端·javascript
web_小码农1 小时前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
Armouy1 小时前
Electron:核心概念、性能优化与兼容问题
前端·javascript·electron
F2E_Zhangmo1 小时前
react native如何发送蓝牙命令
javascript·react native·react.js
博主花神1 小时前
【TypeScript】梳理
javascript·ubuntu·typescript
淡笑沐白1 小时前
ECharts入门指南:数据可视化实战
前端·javascript·echarts
非科班Java出身GISer1 小时前
ArcGIS JS 基础教程(1):地图初始化(含AMD/ESM两种引入方式)
javascript·arcgis·arcgis js·arcgis js 初始化·arcgis js 地图初始化
前端摸鱼匠2 小时前
Vue 3 的defineProps编译器宏:详解<script setup>中defineProps的使用
前端·javascript·vue.js·前端框架·ecmascript
天外天-亮2 小时前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind