elementui的時間范圍組件,限制選了第一個時間后,第二個只能在第一個的前后一周


 <el-date-picker
          v-model="chartsTime"
          type="datetimerange"
          :clearable='clearableState'
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          @change="changeTime"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          :picker-options="pickerOptions"
        >
// 前后需要的天數-1
const space = 7
// 所選的第一個日期
let _minDate = ''
import { nowTime, yesterday } from "@/utils/time";
import dayjs from 'dayjs'
export default {
  data() {
    return {
      chartsTime: [yesterday(), nowTime()],
      clearableState:false,
       pickerOptions: {
          // 設置禁用狀態
          disabledDate: (time) => {
              // 當選中第一個時間時
              if (_minDate) {
                  // 最小時間
                  const min = dayjs(_minDate).subtract(space, 'day')
                  // 最大時間
                  const max = dayjs(_minDate).add(space, 'day')
                  return (
                      // 控制可以選擇的時間范圍
                      dayjs(time).isBefore(min) ||
                      dayjs(max).isBefore(time)
                  )
              } else {
                  return false
              }
          },
          // 選中日期后會執行的回調
          onPick({ minDate }) {
              _minDate = minDate
          },
      },
import dayjs from 'dayjs'


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM