el-date-picker 只能选择当前时间一月前到今天的时间

该代码片段定义了一个名为`get_date`的函数,用于生成近一个月的日期范围(包括今天和30天前),并将结果存储在数组中,以便于在表单中使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

赋值:
    this.get_date(30)
    const appDateArray = []
    appDateArray.push(this.previousDate, this.nowDate)
    this.formToIdentify.appDate = appDateArray




 // 获取近一月的时间
    get_date(num) {
      const dateArray = []
      // 获取今天日期
      const myDate = new Date()
      const today =
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate()
      myDate.setDate(myDate.getDate() - num)
      let dateTemp // 临时日期数据
      const flag = 1
      for (let i = 0; i < num; i++) {
        dateTemp =
          myDate.getFullYear() +
          '-' +
          (myDate.getMonth() + 1) +
          '-' +
          myDate.getDate()
        dateArray.push({
          date: dateTemp
        })
        myDate.setDate(myDate.getDate() + flag)
      }
      dateArray.push({
        date: today
      })
      const arr = []
      const newArr = []
      dateArray.forEach((item) => {
        arr.push(item.date.split('-'))
      })
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][1] < 10) {
          arr[i][1] = '0' + arr[i][1]
        }
        if (arr[i][2] < 10) {
          arr[i][2] = '0' + arr[i][2]
        }
      }
      for (let j = 0; j < arr.length; j++) {
        newArr.push(arr[j].join('-'))
      }
      // 当前日期
      this.nowDate = newArr[newArr.length - 1] + ' 00:00:00'
      // 30天前日期
      this.previousDate = newArr[0] + ' 23:59:59'
      // 日期区间数组
      // console.log(this.nowDate)
      // console.log(this.previousDate)
      // console.log(newArr)
      return newArr
    },

### 解决 `el-date-picker` 组件限制只能选择当前选中日期一个月的问题 为了实现仅允许用户选择当前选中日期一个月内的日期,可以利用 `picker-options` 的 `disabledDate` 函数来动态计算并禁用不符合条件的日期。 #### 使用 `disabledDate` 方法控制可选日期范围 通过定义 `disabledDate` 函数,在其中根据当前选中的日期 (`selectedDate`) 计算出有效的时间区间。对于不在该区间的日期,则返回 true 表示这些天不可被选取: ```javascript // JavaScript 部分 export default { data() { return { selectedDate: null, pickerOptions: { disabledDate(time) { const oneMonthInMs = 30 * 24 * 60 * 60 * 1000; if (!this.selectedDate) { // 如果没有选定初始日期则不做任何限制 return false; } let startDate = new Date(this.selectedDate); let endDate = new Date(this.selectedDate); startDate.setMonth(startDate.getMonth() - 1); // 向推移一个月 endDate.setMonth(endDate.getMonth() + 1); // 向后延展一个月 return time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime(); }.bind(this), }, }; } }; ``` 此方法会随着用户的交互实时更新可用的选择范围[^1]。 #### HTML 结构配合数据绑定 确保在模板部分正确配置了 `v-model` 和 `picker-options` 属性以便于上述逻辑能够正常工作: ```html <template> <!-- Element UI date picker component --> <el-date-picker v-model="selectedDate" :picker-options="pickerOptions" type="date" placeholder="Pick a day"> </el-date-picker> </template> ``` 这样当页面加载完成之后,只要选择了某个具体的日期作为起点,那么后续就只会显示从这个时间点往/往后各一个月的日历选项给用户挑选了[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值