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 동적 한정된 날짜 범위 선택기 코드 세션에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다.

멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

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

좋은 웹페이지 즐겨찾기