如何设置el-date-picker的默认截止时间为“23:59:59”

总结网上的方法,最好用的是最后一个

设置的关键是:default-time="['00:00:00', '23:59:59']"

javascript 复制代码
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="formData.dischargeTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>

有的人default-time前加冒号才可以,有的人不加才行,不知道为什么,但都可以试一试,但这两种方法对我无效。

我用的下边这种方法

javascript 复制代码
<el-date-picker
    :default-time="defaultTimeFormat"
    v-model="selectedDate"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
/>
 
<script>
const defaultTimeFormat = computed(() => {
  const [start, end] = ["00:00:00", "23:59:59"].map(time => {
    const [hour, minute, second] = time.split(":").map(Number);
    return new Date(0, 0, 0, hour, minute, second);
  });
  const dateRange: [Date, Date] = [start, end]
  return dateRange;
});
</script>

效果如下

如果想取开始时间和截止时间

javascript 复制代码
 <el-date-picker
          v-model="selectedDate"
          :default-time="defaultTimeFormat"
          size="small"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          @change="handleDateChange"
        />
        
//时间选择器
// 存储选择的日期 `
const selectedDate = ref(null);
const start = ref("2024-10-01 9:00:00.00");
const end = ref("2024-11-07 11:00:00.00");
// 处理日期更改事件
const handleDateChange = (date) => {
  selectedDate.value = date;
  const date1 = new Date(selectedDate.value[0]);
  console.log(date1.getDate, 1234);
  const date2 = new Date(selectedDate.value[1]);
  const date11 = `${date1.getFullYear()}-${String(
    date1.getMonth() + 1
  ).padStart(2, "0")}-${String(date1.getDate()).padStart(2, "0")} ${String(
    date1.getHours()
  ).padStart(2, "0")}:${String(date1.getMinutes()).padStart(2, "0")}:${String(
    date1.getSeconds()
  ).padStart(2, "0")}`;
  const date22 = `${date2.getFullYear()}-${String(
    date2.getMonth() + 1
  ).padStart(2, "0")}-${String(date2.getDate()).padStart(2, "0")} ${String(
    date2.getHours()
  ).padStart(2, "0")}:${String(date2.getMinutes()).padStart(2, "0")}:${String(
    date2.getSeconds()
  ).padStart(2, "0")}`;
  start.value = date11 + ".000";
  end.value = date22 + ".000";
  console.log("选择的日期1111:", start.value, end.value);
};

// 处理确认按钮点击事件
const confirmDate = () => {
  console.log("选择的日期:", selectedDate.value);
  if (selectedDate.value === null) {
    start.value = "2024-10-01 9:00:00.00";
    end.value = "2024-11-07 11:00:00.00";
  }
   allData1();
};
相关推荐
月光宝盒造梦师1 小时前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
酉鬼女又兒2 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士2 小时前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js
阿珊和她的猫2 小时前
以用户为中心的前端性能指标解析
前端·javascript·css
SeSs IZED3 小时前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx
叫我一声阿雷吧3 小时前
JS 入门通关手册(36):变量提升、暂时性死区与块级作用域
javascript·变量提升·暂时性死区·tdz·块级作用域· 前端面试
成都渲染101云渲染66663 小时前
跳出“硬件堆砌”陷阱|渲染101如何用技术重构云渲染的专业价值?
java·前端·javascript
SuperEugene3 小时前
Vue3 性能优化规范:日常必做优化(不玄学、可落地)|可维护性与兜底规范篇
开发语言·前端·javascript·vue.js·性能优化·前端框架
cypking3 小时前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
A923A3 小时前
【小兔鲜电商前台 | 项目笔记】第二天
前端·vue.js·笔记·项目·小兔鲜