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
}
相关推荐
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
m0_748254886 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
噢,我明白了7 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__8 小时前
APIs-day2
javascript·css·css3
关你西红柿子8 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根8 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.8 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3119 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256569 小时前
Vue - axios的使用
前端·javascript·vue.js