a-range-picker日期控件使用

原创已于 2024-08-20 15:30:59 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2024-08-20 15:29:19 首次发布

Ant Design Vue 中日期选择控件

a-range-picker

客户要求：默认显示当月的第一天和最后一天

				 <a-range-picker
                    v-model="queryParam.createTimeRange"
                    format="YYYY-MM-DD"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onDateChange"
                    @ok="onDateOk"
                  />

	import moment from 'moment'
	created() {
	 //获取当月第一天
      this.queryParam.beginTime=this.currentTime();
      //获取当月最后一天
      this.queryParam.endTime=this.getLastDayOfNaturalMonth();
      //回显数据至日期选择控件
      this.queryParam.createTimeRange = [moment(new Date(this.queryParam.beginTime),'YYYY-MM-DD'),moment(new Date(this.queryParam.endTime),'YYYY-MM-DD')]
    },
    methods: {
	      //获取当月的第一天
	      currentTime() {
	        const currentDate = new Date();
	        const year = currentDate.getFullYear();//获取当前年
	        const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
	        const firstDay = "01";//日
	        return `${year}-${month}-${firstDay}`;
	      },
	      //获取当月的最后一天
	      getLastDayOfNaturalMonth() {
	        // 获取当前日期
	        const currentDate = new Date();
	        // 获取当前年份
	        let year = currentDate.getFullYear();
	        // 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
	        let month = String(currentDate.getMonth() + 2).padStart(2, "0");
	        // 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
	        if (month === '13') {
	          year = year + 1;
	          month = '01';
	        }
	        // 设置每个月的第一天为 '01'
	        let firstDay = "01";
	        // 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
	        const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
	        // 计算当前月的最后一天，通过减去一天的毫秒数来得到
	        const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
	        // 将最后一天的日期转换为 ISO 格式，并提取日期部分
	        return lastDayOfMonth.toISOString().split("T")[0];
	      },
	      onDateChange: function (value, dateString) {
	        this.queryParam.beginTime=dateString[0];
	        this.queryParam.endTime=dateString[1];
        	this.$forceUpdate()
   		   },
	      onDateOk(value) {
	        console.log(value);
	      },
      }

在这里插入图片描述