• 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=" 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;
    },
  • 相关阅读:
    Net
    GUI
    第三方模块
    步入大四的第一天 2020/9/3
    期末复习计划及每日更新 8/10-9/2
    成都,come back 2020/8/10
    回家第三天 2020/7/31
    连续两天的好太阳的一天 2020/7/27
    规划规划,接下来的一个月该如何安排 7/25
    紧紧张张又兴兴奋奋的一天 2020/7/24
  • 原文地址:https://www.cnblogs.com/yuanyuanya/p/15261053.html
Copyright © 2020-2023  润新知