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
}
相关推荐
我是哈哈hh1 小时前
【JavaScript进阶】作用域&解构&箭头函数
开发语言·前端·javascript·html
酷酷的阿云1 小时前
Vue3性能优化必杀技:useDebounce+useThrottle+useLazyLoad深度剖析
前端·javascript·vue.js
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的缩略图列表(Thumbnail List)
前端·javascript·vue.js·ecmascript·deepseek
圣心2 小时前
Ollama 快速入门
开发语言·javascript·人工智能
禾苗种树2 小时前
使用echart的dataZoom的labelFormatter自定义时间范围
前端·javascript·vue.js·echart
m0_748240912 小时前
SpringMVC 请求参数接收
前端·javascript·算法
Hermione_log2 小时前
【vue项目如何利用event-stream实现文字流式输出效果】
前端·javascript·vue.js
Little_Code3 小时前
关于uniapp使用renderJS中调用父类方法和参数的使用
前端·javascript·uni-app
qq_316837753 小时前
uniapp h5端和app端 使用 turn.js
开发语言·javascript·uni-app
程序员远仔4 小时前
【Vue.js 和 React.js 的主要区别是什么?】
前端·javascript·css·vue.js·react.js·性能优化·html5