美文网首页
elementui 中的date-picker 时间限制设置,以

elementui 中的date-picker 时间限制设置,以

作者: wxw_威 | 来源:发表于2024-03-06 11:01 被阅读0次

根据最大时间和最小时间,限制时间选择器的选择时间范围

<template>
...
  <el-date-picker
    v-model="endTime"
    type="datetime"
    size="small"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="{ disabledDate }"
    placeholder="开始时间"
/>
...
</template>

<script>
import Moment from 'moment'
export default {
  props: {
    ...
    minTime: {
      type: String,
      default: ''
    },
    maxTime: {
      type: String,
      default: ''
    }
  },
...
  methods: {
    disabledDate(time) {
      if (this.minTime && this.maxTime) {
      // 最大日期后添加' 23:59:59',是为了让按钮'此刻'生效
        return time.getTime() < new Date(this.minTime + ' 00:00:00') ||
          time.getTime() > new Date(this.maxTime + ' 23:59:59')
      } else {
        return false
      }
    },
}
</script>

设置日期会让自带的此刻按钮失效,解决方法是,最大日期添加' 23:59:59',时分秒,让此刻生效。

相关文章

网友评论

      本文标题:elementui 中的date-picker 时间限制设置,以

      本文链接:https://www.haomeiwen.com/subject/xpjjzdtx.html