时间范围和限制Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to

---

一、警告提示

警告： Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead.

原因： a-range-picker 组件期望的 value 是一个 moment 对象数组[ “2024-07-10T07:46:14.632Z”, “2024-07-11T07:46:14.632Z” ]，而不是字符串数组[‘2020-10-10 10:10:10’, ‘2020-10-20 10:10:10’]。你需要将绑定的 dateList 中存储 moment 对象，而不是格式化后的字符串。

修改前： dateList: [moment().subtract(1, ‘d’).format(‘YYYY-MM-DD HH’), moment().format(‘YYYY-MM-DD HH’)],
修改后： dateList: [moment().subtract(1, ‘d’), moment()]

二、基础使用

<template>
  <a-range-picker
    v-model="dateList"
    style="width:466px;"
    :allow-clear="false"
    :show-time="{ format: 'YYYY-MM-DD HH:mm:ss' }"
    format="YYYY-MM-DD YYYY-MM-DD HH:mm:ss"
    :placeholder="['开始时日期', '结束日期']"
    @ok="okDate"
  />
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      portDate: {
        beginTime: moment().subtract(1, 'd').format('YYYY-MM-DD HH'),
        endTime: moment().format('YYYY-MM-DD HH')
      }, //搜索
      dateList: [moment().subtract(1, 'd'), moment()] //绑定
    };
  },
  methods: {
      moment,
    // 时间确认
    okDate(e) {
      this.portDate.beginTime = null
      this.portDate.endTime = null
      if (Date.parse(e[1]) - Date.parse(e[0]) > (1000 * 60 * 60 * 24 * 1)) {
        this.$msg.warning('时间范围不能超过1天')
        this.portDate.beginTime = moment(e[0]).subtract(0, 'd').format('YYYY-MM-DD HH')
        this.portDate.endTime = moment(e[0]).subtract(-1, 'd').format('YYYY-MM-DD HH')
        // [moment().subtract(1, 'days').set({ hour: 0, minute: 0, second: 0, millisecond: 0 }), moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 59 })],
        this.dateList = [moment(e[0]).subtract(0, 'd'), moment(e[0]).subtract(-1, 'd')]
      } else {
        this.portDate.beginTime = e[0] ? moment(e[0]).format('YYYY-MM-DD HH') : null
        this.portDate.endTime = e[1] ? moment(e[1]).format('YYYY-MM-DD HH') : null
      }
      console.log(this.portDate, e)
    },
  }
};
</script>

三、自定义时间范围

<template>
  <div ref="chartView">
    <a-range-picker
      style="width:370px;"
      :default-value="searchTopoloyData.dateTime"
      :allow-clear="false"
      :get-calendar-container="() => $refs.chartView"
      :ranges="rangesObj"
      :show-time="{ format: 'HH:mm:ss' }"
      format="YYYY-MM-DD HH:mm:ss"
      :placeholder="['开始时间', '结束时间']"
      @change="changeDate"
      @ok="okDate"
    />
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      searchTopoloyData: {
        dateTime: [moment().subtract(1, 'd').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
      },
      rangesObj: {
        '最近15分钟': [moment().subtract(15, 'minutes'), moment()],
        '最近半小时': [moment().subtract(30, 'minutes'), moment()],
        '最近1小时': [moment().subtract(1, 'hours'), moment()],
        '昨天': [moment().subtract(1, 'days').set({ hour: 0, minute: 0, second: 0, millisecond: 0 }), moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 59 })],
        '今日': [moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }), moment()],
        '近七日': [moment().subtract(7, 'd'), moment()],
        '最近1月': [moment().subtract(1, 'month'), moment()]
      },
    };
  },
  methods: {
      moment,
    // 时间选择
    changeDate(e) {
    },
    // 时间确认
    okDate(e) {
      this.searchTopoloyData.dateTime = []
      this.searchTopoloyData.dateTime[0] = e[0] ? moment(e[0]).format('YYYY-MM-DD HH:mm:ss') : ''
      this.searchTopoloyData.dateTime[1] = e[1] ? moment(e[1]).format('YYYY-MM-DD HH:mm:ss') : ''
    },
  }
};
</script>

<style lang="less" scoped>
  /deep/.ant-calendar-picker-container{
      .ant-tag-blue{
        color: #fff !important;
        background-color: #007d7b!important;
      }
    }
</style>

四、自定义格式

1.自定义默认的日期内容format="YYYY-MM-DD HH 时"

       <div ref="chartView">
          <a-range-picker
            v-model="dateList"
            style="width:466px;"
            :allow-clear="false"
            :get-calendar-container="() => $refs.chartView"
            :show-time="{ format: 'HH' }"
            format="YYYY-MM-DD HH 时"
            :placeholder="['开始时日期', '结束日期']"
            @ok="okDate"
          />
        </div>

2.使用伪元素::after书写内容

找到要添加的元素，使用伪元素加内容即可

::v-deep .ant-calendar-time-picker-select  li::after {
  display: inline-block;
  content: ' 时';
}

五、自定义日期范围

链接

六、el-date-picker限制年月日时分秒

vue3使用el-date-picker，做限制只能选择当前时间之前的时刻。
el-date-picker文档里只能限制年月日，需要自己配置限制时分秒

          <el-date-picker v-model="time" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disabledDate" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
            :disabled-seconds="disabledSeconds">
          </el-date-picker>






const time = ref(undefined)
// 禁用所有未来的日期
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
// 禁用当前时间之后的小时
const disabledHours = (val) => {
  console.log('设置时', val);
  let arr = []
  for (let i = 0; i < 24; i++) {
    if (i > new Date().getHours()) {
      arr.push(i)
    }
  }
  return arr;
};
// 禁用当前时间之后的分钟
const disabledMinutes = (hour, val) => {
  console.log('获取时', hour, val);
  let arr = [];
  if (hour == new Date().getHours()) {
    for (let i = 0; i < 60; i++) {
      if (i > new Date().getMinutes()) {
        arr.push(i)
      }
    }
  }
  return arr;
};
// 禁用当前时间之后的秒钟
const disabledSeconds = (hour, minute, val) => {
  console.log('获取时分', hour, minute, val);
  let arr = [];
  if (minute == new Date().getMinutes()) {
    for (let i = 0; i < 60; i++) {
      if (i > new Date().getSeconds()) {
        arr.push(i)
      }
    }
  }
  return arr;
};