vue 设置时间控件从某个时间点开始,之前的无法选择,选择结束时间为最后一天,其余时间无法选中

      <el-form-item label="请选择时间" prop="username">
        <el-date-picker
          v-model="detaTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handleDateChange"
        >
        </el-date-picker>
      </el-form-item>

在全局变量中加入  我的是到五月,可以自行修改

    detaTime: [],
      pickerOptions: {
        disabledDate: (time) => {
          // 获取当前月的最后一天
          const currentDate = new Date()
          const lastDay = new Date(
            currentDate.getFullYear(),
            currentDate.getMonth() + 1,
            0
          )

          // 限制开始时间不能早于2025-05-01
          const minDate = new Date(2025, 4, 1) // 月份是0-based,所以4表示5月

          // 如果正在选择开始日期
          if (this.detaTime && !this.detaTime[1]) {
            return time.getTime() < minDate.getTime() ||
              time.getTime() > lastDay.getTime()
          }

          // 如果正在选择结束日期
          if (this.detaTime && this.detaTime[0]) {
            const startDate = new Date(this.detaTime[0])
            return time.getTime() < startDate.getTime() ||
              time.getTime() > lastDay.getTime()
          }

          // 默认情况
          return time.getTime() < minDate.getTime() ||
            time.getTime() > lastDay.getTime()
        }
      },
  mounted() {
    // 设置默认结束日期为当前月最后一天
    const currentDate = new Date()
    const lastDay = new Date(
      currentDate.getFullYear(),
      currentDate.getMonth() + 1,
      0
    )
    const formattedLastDay = `${lastDay.getFullYear()}-${String(lastDay.getMonth() + 1).padStart(2, '0')}-${String(lastDay.getDate()).padStart(2, '0')}`

    // 设置默认日期范围为2025-05-01到当前月最后一天
    this.dateRange = ['2025-05-01', formattedLastDay]
  },

获取当前时间,并且在当前时间往前推几天进行查询

      // 获取当前时间作为结束时间
      const endDate = new Date();

      const startDate = new Date();
      startDate.setDate(startDate.getDate() - 7);
      this.detaTime[0] = this.startFormatDate(startDate);
      this.detaTime[1] = this.formatDate(endDate);
      this.queryParams.startTime = this.startFormatDate(startDate) + ' 00:00:00';
      this.queryParams.endTime = this.formatDate(endDate);

对日期进行格式化显示

    handleDateChange(val) {
      if (val && val.length === 2) {
        // 确保结束日期是当前月的最后一天
        const endDate = new Date(val[1])
        const lastDay = new Date(
          endDate.getFullYear(),
          endDate.getMonth() + 1,
          0
        )

        if (endDate.getDate() !== lastDay.getDate()) {
          const formattedLastDay = `${lastDay.getFullYear()}-${String(lastDay.getMonth() + 1).padStart(2, '0')}-${String(lastDay.getDate()).padStart(2, '0')}`
          this.dateRange = [val[0], formattedLastDay]
        }
      }
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    startFormatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day} `;
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值