el日期选择器设置默认时间

最新推荐文章于 2024-04-05 16:28:51 发布

原创最新推荐文章于 2024-04-05 16:28:51 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中使用自定义JS文件来设置日期选择器的默认时间段。通过定义日期格式化函数和设置默认起始日期，实现了一个月时间范围的选择。此方法适用于需要快速设置默认日期区间场景。

我们再用el进行开发时使用日期选择器的时候会遇到设置默认事件的需求，我的解决方式在一个js文件里设置好时间格式例如：格式为yyyy-mm-dd

const base = {
   /**
   * 返回日期格式 为 yy-mm--dd
   */
    formatDateS(date) {
      var YY = date.getFullYear();
      var MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return `${YY}-${MM}-${DD}`;
    },
    }

然后在需要设置默认日期的页面引入该js 并设置默认时间段

import base from "@/utils/base";
const invoice_end = new Date();//结束时间
const invoice_start = new Date();//开始时间
invoice_start.setTime(invoice_start.getTime() - 3600 * 1000 * 24 * 29);/默认时间段

在这里插入图片描述

在日期的对应字段设置默认值就完成日期默认时间段的操作了（我这里设置默认事件为一个月按三十天计算）