vue ant DatePicker 日期选择器默认当前月 或默认多少天

需求:数据量太大时,初始进入页面 默认展示两周或一个月数据
1.默认进去初始当前月
在这里插入图片描述

<template>
 <a-form-item label="添加时间">
   <a-range-picker :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" />
  </a-form-item>
</template>
 created() {
    this.getInitializeDate();//获取当月默认日期(当月1号到当天)
  },
  method:{
	  getInitializeDate() {
	      let date = new Date()//获取新的时间
	      //获取当前年份,并且转为字符串
	      let year = date.getFullYear().toString()
	      //获取当前月份,因为月份是要从0开始,此处要加1
	      //使用三元表达式,判断是否小于10,如果是的话,就在字符串前面拼接'0'
	      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
	      //获取天,判断是否小于10,如果是的话,就在在字符串前面拼接'0'
	      let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
	      //字符串拼接,将开始时间和结束时间进行拼接
	      let start = year + '-' + month + '-01'    //当月第一天
	      let end = year + '-' + month + '-' + day  //当天
	      this.createValue = [start, end] //将值设置给组件DatePicker 绑定的数据
	    },
  }
  

2.默认进去显示14天 比较简单 多少天 下方代码数字填多少就可以了
在这里插入图片描述

 <a-col :md="8" :sm="24">
   <a-range-picker style="width:100%;" :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange"  />
 </a-col>
import dayjs from 'dayjs';
 created() {
 //是要传给后端的值  进行了日期格式化
   this.queryParam.opSTime = dayjs(moment().startOf('day').subtract(14, 'd')).format('YYYY-MM-DD');
   this.queryParam.opETime = dayjs(moment().endOf('day')).format('YYYY-MM-DD');
   //列表接口请求
   this.loadList(1);
   //日期选择器页面显示的值 
   this.createValue = [moment().startOf('day').subtract(14, 'd'), moment().endOf('day')]
  },
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值