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

示例图片示例图片

  1. 导入moment
 <script>
import moment from 'moment';
export default {
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
    };
  },
  methods: {
    moment,
  },
};
</script>
  1. 设置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',
            };
        },
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值