a-range-picker动态显示默认日期

最新推荐文章于 2024-05-22 16:28:54 发布

NAVILLERA

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量3.5k

点赞数 2

文章标签： javascript html vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43923202/article/details/109595994

版权

需求：判断当前日期是否在26号之前，以26号为节点分为两种默认日期
使用:default-value 时发现data发生变化了，但是渲染在组件上的数据没有变，使用：value绑定就可以了

html：

<a-range-picker
    :value="getDateRange(startTime, endTime)"
 />

js：

data(){
    startTime: moment().subtract(2, "month").startOf("month").add(25, 'days'),
    endTime: moment().subtract(1, "month").startOf("month").add(24, 'days'),
}
methods:{
    moment,
    getDateRange(startDate, endDate) {
      return [
        this.moment(startDate, "YYYY-MM-DD"),
        this.moment(endDate, "YYYY-MM-DD"),
      ];
    }
}
mounted() {
    var day = new Date().getDate();
    if (day < 26) {
      this.startTime = moment().subtract(2, "month").startOf("month").add(25, 'days');
      this.endTime = moment().subtract(1, "month").startOf("month").add(24, 'days');
    } else {
      this.startTime = moment().subtract(1, "month").startOf("month").add(25, 'days');
      this.endTime = moment().startOf("month").add(24, 'days');
    }
}