element-ui 동적 한정된 날짜 범위 선택기 코드 세션 상세 설명

무엇 때문에 이 문제를 풀었는가
저는 부호농입니다. 왜냐하면 이번 수요는 이전에 실현된 기능의 세부 사항을 만났기 때문입니다. 다시 처음부터 구성 요소 문서를 한 번 뒤집고 싶지 않습니다. 가장 좋은 것은 직접 복사하여 붙이는 것입니다.
디테일
picker-options 설정 규칙: 시간 범위는 최대 30일, 늦어도 오늘입니다.
element-ui의 날짜 선택기의 구성 요소는el-date-picker입니다.
pickerOptions2를 설정하고,

 data() {
  return {
   pickerOptions2: {
    disabledDate: theDate => {
     const oneDay = 3600 * 1000 * 24

     const current = theDate.getTime()
     const now = Date.now()

     const condition1 = current > now
     if (!this.minDateTimestamp) return condition1

     const pickerRangeNum = 30

     //  30 , 
     const lastMonthBegin = this.minDateTimestamp
     const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay

     return (
      condition1 || current < lastMonthBegin || current > lastMonthEnd
     )
    },
    onPick: ({ maxDate, minDate }) => {
     this.minDateTimestamp = minDate.getTime()
     if (maxDate) {
      this.minDateTimestamp = 0
     }
    },
   },
  }
 },

템플릿 설정,

<template>
<el-date-picker
 class="form-item-control"
 v-model="qo2.dateRange2"
 type="daterange"
 range-separator="   "
 start-placeholder=" "
 end-placeholder=" "
 placeholder=" "
 :picker-options="pickerOptions2"
/>
</template>

총결산
element-ui 동적 한정된 날짜 범위 선택기, 다시 돌아보세요. 걱정하지 마세요.
엘리먼트-ui 동적 한정된 날짜 범위 선택기 코드 세션에 대한 이 글은 여기까지 소개되었습니다. 더 많은 엘리먼트-ui 동적 한정된 날짜 범위 선택기 코드 세션에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!