ant-design-vue ui 日期選擇器(一)限制只能選擇當前月份 以及 只能選擇當前時間之前的時間


UI庫:ant-design-vue ui 

一、需求:限制只能選擇當前月份的時間。默認展示當天。

html部分:

<a-range-picker :default-value="requestTime" format="YYYY-MM-DD" :disabled-date="disabledDate" @change="dateChange" style="width: 258px">
  <a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>

js部分:

設置當前時間:

import moment from 'moment';
let sevenDaysBefore = new Date(new Date().toLocaleDateString()).getTime();
export default {
  data() {
    return {
      requestTime: [moment(format(new Date(sevenDaysBefore)), 'YYYY-MM-DD'), moment(format(new Date()), 'YYYY-MM-DD')],
    }
  },
  methods: {
    moment,
    disabledDate(current) {
      const yearStart = moment().startOf('month'); // 當前月份的第一天
      const yearEnd = moment().endOf('month'); // 當前月份的最后一天
      return yearStart > current || current >= yearEnd;
    },
    dateChange(value) {
      if (value.length > 0) {this.data.requestBegTime = format(value[0]._d); // 獲取到選中的時間賦值,然后通過點擊事件調用接口
        this.data.requestEndTime = format(value[1]._d);
      } else {
        this.data.requestBegTime = '';
        this.data.requestEndTime = '';
      }
    },
  },
};

二、只能選擇當前時間之前的時間。默認展示當天。

disabledDate(current) {
  const yearStart = moment().startOf('month');
  const yearEnd = moment().endOf('day');
  return current >= yearEnd;
},

 


免責聲明!

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



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