Element-ui 日期时间选择器常用配置

三月风
230 阅读4分钟

日期时间选择器设置选择日期范围

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions"
    format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']" />
</template>

<script>
  export default {
    data() {
      this.pickerOptions = {
        disabledDate: time => {
          // return date.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
          let dateTime = new Date().getTime()
          const minTime = dateTime - 24 * 60 * 60 * 1000
          const maxTime = new Date(dateTime).setMonth(new Date(dateTime).getMonth() + 1)
          return time.getTime() < minTime || time.getTime() > maxTime
        },
        selectableRange: '00:00:00 - 23:59:59', // 设置日期选择值范围
      }
      return {
        value: '',
      }
    },
  }
</script>

时间格式化，要求加 00:00:00-23:59:59

<template>
  <el-date-picker
    v-model="params.date"
    class="wd-input"
    type="daterange"
    align="right"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd HH:mm:ss"
    :editable="false"
    :default-time="['00:00:00', '23:59:59']" />
</template>

<script>
export default {
  data() {
    return {
      params: {
        date: null,
      },
    }
  },
}
</script>

限制只能选择 30 / 90 天以内的天数

this.pickerOptions = {
  disabledDate: time => {
    const dateTime = new Date().getTime()
    const calcDay = 30 * 24 * 3600 * 1000 // 30天以内
    const maxTime = dateTime + calcDay
    const minTime = dateTime - 1 * 24 * 3600 * 1000
    return time.getTime() < minTime || time.getTime() > maxTime
  },
}

this.pickerOptions = {
  disabledDate: time => {
    let dateTime = new Date().getTime()
    const calcDay = 90 * 24 * 3600 * 1000 // 90 天以内
    const maxTime = dateTime + calcDay
    const minTime = dateTime - 1 * 24 * 3600 * 1000
    return time.getTime() < minTime || time.getTime() > maxTime
  },
  selectableRange: '00:00:00 - 23:59:59',
}

限制只能选择 30 / 90 天以内的天数

this.pickerOptions = {
  disabledDate: time => {
    const dateTime = new Date().getTime()
    const calcDay = 30 * 24 * 3600 * 1000 // 30天以内
    const maxTime = dateTime + calcDay
    const minTime = dateTime - 1 * 24 * 3600 * 1000
    return time.getTime() < minTime || time.getTime() > maxTime
  },
}

只能选择今天以前 30 天以内的日期

<template>
  <section class="my-recovery_search g-search">
    <el-form ref="searchForm" :model="params" label-width="120px" label-position="right">
      <sp-search :fold-control="false">
        <sp-search-item>
          <el-form-item label="客户查询" prop="key">
            <el-input v-model="params.key" placeholder="请输入客户名称/资源编号/联系方式"> </el-input>
          </el-form-item>
        </sp-search-item>

        <sp-search-item>
          <el-form-item label="回收时间">
            <el-date-picker
              v-model="params.date"
              class="g-input"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              :editable="false"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions" />
          </el-form-item>
        </sp-search-item>

        <template #action>
          <sp-search-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </sp-search-item>
        </template>
      </sp-search>
    </el-form>
  </section>
</template>

<script>
  import dayjs from 'dayjs'

  export default {
    data() {
      this.times = null
      return {
        params: {
          key: '',
          date: '',
        },
      }
    },
    computed: {
      pickerOptions() {
        return {
          disabledDate: time => {
            const minDate = this.times
            const flag = minDate
              ? time >= dayjs(minDate).add(30, 'day') || time <= dayjs(minDate).subtract(30, 'day')
              : false
            return flag || time.getTime() > Date.now()
          },
          onPick: ({ minDate }) => {
            this.times = minDate
          },
        }
      },
    },
    methods: {
      /**
       * @description 查询
       */
      search() {
        const { date, ...args } = this.params
        const params = { ...args }
        params.startTime = date && date.length ? date[0] : ''
        params.endTime = date && date.length ? date[1] : ''

        this.$emit('search', params)
      },

      /**
       * @description 重置
       */
      resetForm() {
        this.$refs.searchForm.resetFields()
        this.search()
      },
    },
  }
</script>

限制只能选择 30 天以内的数据包括时分秒

<template>
  <el-date-picker
    v-model="ruleForm.date1"
    type="datetime"
    placeholder="仅可设置30天内的任务"
    size="small"
    format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm:ss"
    popper-class="no-atTheMoment"
    :default-value="new Date(Date.now() + 31 * 60 * 1000)"
    :picker-options="pickerOptions"
    :clearable="false"
    :editable="false" />
</template>

<script>
export default {
  computed: {
    pickerOptions() {
      this.pickerOptions = {
        disabledDate: time => {
          const dateTime = Date.now() // 获取当前包含时分秒的时间戳
          const maxTime = dateTime + 30 * 24 * 3600 * 1000 // 计算 30 天后
          const minTime = dateTime - 1 * 24 * 3600 * 1000 // 计算起始天数的时间戳
          return time.getTime() < minTime || time.getTime() > maxTime
        },
      }
    },
  },
  data() {
    this.rules = {
      date: [
        { required: true, message: '请选择日期', trigger: 'change' },
        { validator: this.validDate, trigger: 'change' },
      ],
    }

    return {}
  },
  methods: {
    /**
     * @description 选择日期时间验证，选择当前 30 分钟后，到 30 天内范围
     */
    validDate(rule, value, callback) {
      if (value === '') return

      const calcTime = new Date(value).getTime() // 计算值时间戳
      const dateTime = Date.now()
      const minTime = dateTime + 30 * 60 * 1000 // 三十分钟后
      const maxTime = dateTime + 30 * 24 * 3600 * 1000 // 30天后

      if (calcTime < minTime) {
        callback(new Error('请选择当前时间 30 分钟后的时间'))
      } else if (calcTime > maxTime) {
        callback(new Error('请选择 30 天以内的时间'))
      } else {
        callback()
      }
    },
  },
}
</script>

限制一个时间段并且只能选择一个月内的数据

<template>
  <el-date-picker
    v-model="date"
    width="260px"
    type="daterange"
    align="left"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    :editable="false"
    @change="dateChange">
  </el-date-picker>
</template>

<script>
  import dayjs from 'dayjs'

  export default {
    data() {
      this.times = null
      return {
        isLoading: false,
        date: null,
        params: {
          limit: 10,
          start: 1,
          startTime: '',
          endTime: '',
        },
      }
    },
    computed: {
      pickerOptions() {
        return {
          disabledDate: time => {
            const minDate = this.times
            const flag = minDate
              ? time >= dayjs(minDate).add(30, 'day') || time <= dayjs(minDate).subtract(30, 'day')
              : false
            if (flag) return flag

            const targetTime = time.getTime()
            const endDay = new Date(dayjs().format('YYYY-MM-DD') + ' 23:59:59').getTime()
            const startDay = new Date(dayjs('2023-07-01').subtract(1, 'd').format('YYYY-MM-DD')).getTime()
            return targetTime <= startDay || targetTime > endDay
          },
          onPick: ({ minDate }) => {
            this.times = minDate
          },
        }
      },
    },
    methods: {
      /**
       * @description 获取数据
       */
      async fetchData(isReset = false) {
        isReset && (this.params.start = 1)
        // ...
      },
      /**
       * @description 时间筛选
       */
      dateChange(val) {
        if (!val) this.times = null

        this.params.startTime = val ? val[0] : ''
        this.params.endTime = val ? val[1] : ''
        this.fetchData(true)
      },
    },
  }
</script>
avatar
文章
阅读
粉丝