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
}
相关推荐
开发者小天20 小时前
React中的componentWillUnmount 使用
前端·javascript·vue.js·react.js
sunly_20 小时前
Flutter:视频预览功能
javascript·flutter·音视频
杰克尼21 小时前
vue_day04
前端·javascript·vue.js
小皮虾1 天前
小程序云开发有类似 uniCloud 云对象的方案吗?有的兄弟,有的!
前端·javascript·小程序·云开发
阳懿1 天前
meta-llama-3-8B下载失败解决。
前端·javascript·html
史林枫1 天前
JavaScript 中call和apply的详细讲解 —— 连10岁的小朋友都能看懂!
javascript·apply·call
紫小米1 天前
Vue 2 和 Vue 3 的区别
前端·javascript·vue.js
用户6600676685391 天前
从变量提升到调用栈:V8 引擎如何 “读懂” JS 代码
前端·javascript
白兰地空瓶1 天前
【深度揭秘】JS 那些看似简单方法的底层黑魔法
前端·javascript
进阶的小叮当1 天前
Vue代码打包成apk?Cordova帮你解决!
android·前端·javascript