AntDesignVue的a-range-picker根据自己需要设置默认日期

示例图片

1. 导入moment

 <script>
import moment from 'moment';
export default {
     
  data() {
     
    return {
     
      dateFormat: 'YYYY-MM-DD',
    };
  },
  methods: {
     
    moment,
  },
};
</script>

2. 设置defaultValue默认日期类型为moment
   HTML部分

<a-range-picker class="range" @change="onChange"
            showToday :default-value="[
            moment(getCurrentDataL(), dateFormat),
            moment(getCurrentDataR(), dateFormat),
          ]"
          :format="dateFormat"  />

js的method部分

methods: {
                 
            moment,//moment引入
            //这里我的需求是默认展示十天前至昨天，其他的更改getday后的值即可
            getCurrentDataL() {
                     
                return this.getDay(-10);
            },
            getCurrentDataR() {
     
                // return new Date().toLocaleDateString();
                return this.getDay(-1);
            },
            onChange(date, dateString) {
     
                this.Bus.$emit("datePicker", dateString);
            },
            // 获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】
            getDay(day) {
     
                var today = new Date();
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = this.doHandleMonth(tMonth + 1);
                tDate = this.doHandleMonth(tDate);
                return tYear + "-" + tMonth + "-" + tDate;
            },
            // 处理月份数据
            doHandleMonth(month) {
     
                var m = month;
                if (month.toString().length === 1) {
     
                    m = "0" + month;
                }
                return m;
            },
}，

页面展示时想要达到用户进入时已默认检索十天前至昨天的数据
添加create

created() {
     
            this.value[0] = this.getDay(-10);
            this.value[1] = this.getDay(0);
        },
//另外需要在data中定义value
data() {
     
            return {
     
                value: [],
                dateFormat: 'YYYY-MM-DD',
            };
        },