vue获取月份差,及月份差list,时间控件默认值

本文介绍了如何在Vue项目中计算两个日期之间的月份差,并展示了如何生成月份差的列表。同时,讨论了时间选择器组件的默认值设定,为用户提供更好的交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//时间控件
<el-col class="bts">
    <template>
      下单开始时间:
      <el-date-picker
        v-model="orderTimeBegin"
        class="timePicker"
        type="month"
        placeholder="开始日期"
        value-format="yyyy-MM"
        :picker-options="pickerOptionsStart"
      >
      </el-date-picker>
      下单结束时间:
      <el-date-picker
        v-model="orderTimeEnd"
        class="timePicker"
        type="month"
        placeholder="结束日期"
        value-format="yyyy-MM"
        :picker-options="pickerOptionsEnd"
      >
      </el-date-picker>
      <el-button
        @click="query()"
        type="primary"
        icon="el-icon-search"
        v-loading.fullscreen.lock="fullscreenLoading"
        class="top-button"
        >搜索</el-button
      >
    </template>
  </el-col>
  //
  export default {
	 data() {
 		 pickerOptionsStart: {
        	disabledDate: time => {
	          if (this.orderTimeEnd) {
	            return (
	              time.getTime() > Date.now() - 8.64e6 ||
	              time.getTime() > new Date(this.orderTimeEnd).getTime()
	            );
	          }
            return time.getTime() > Date.now() - 8.64e6;
          }
        },
	      pickerOptionsEnd: {
	        disabledDate: time => {
	          if (this.orderTimeBegin) {
	            return (
	              time.getTime() > Date.now() ||
	              time.getTime() < new Date(this.orderTimeBegin).getTime()
	            );
	          }
	          return time.getTime() > Date.now() - 8.64e6;
	        }
	      },
	       orderTimeBegin: "",
	       orderTimeEnd: "",
	 	}
	},
	 methods: {
	    dataTime() {
	      this.orderTimeEnd = new Date();
	      this.orderTimeBegin=new Date();
	      this.orderTimeBegin.setMonth(new Date().getMonth() - 3);
	      this.orderTimeBegin =this.orderTimeBegin.getFullYear() + "-" + (this.orderTimeBegin.getMonth() + 1);
	      this.orderTimeEnd =this.orderTimeEnd.getFullYear() + "-" + (this.orderTimeEnd.getMonth() + 1)
	    },
	    getYearMonthList() {
	      let dataArr = [];
	      let date1 = this.orderTimeEnd.split("-");
	      date1 = parseInt(date1[0]) * 12 + parseInt(date1[1]);
	      let date2 = this.orderTimeBegin.split("-");
	      date2 = parseInt(date2[0]) * 12 + parseInt(date2[1]);
	      let diff = date1 - date2;
	
	      let data = new Date(this.orderTimeEnd);
	      console.log("data", data);
	      data.setMonth(data.getMonth() + 1); //获取到当前月份,设置月份
	      for (let i = 0; i < diff+1; i++) {
	        data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
	        let m = data.getMonth()+1;
	        dataArr.push(data.getFullYear() + "." + m);
	      }
	      console.log("dataArr", dataArr);
	      return _.sortBy(dataArr, data => data);
	    },
	    //查询按钮
	     query() {
		      if(this.orderTimeEnd == null || this.orderTimeEnd == '') {
		          this.$message({
		            message: '请输入下单结束时间',
		            type: "error"
		          })
		          return false
		      }
		      if(this.orderTimeBegin == null || this.orderTimeBegin == '') {
		          this.$message({
		            message: '请输入下单开始时间',
		            type: "error"
		          })
		          return false
		      }
		      const categories = this.getYearMonthList();
		       axiosUtil
			        .post("dashboard/query", {
			          orderTimeBegin: this.orderTimeBegin,
			          orderTimeEnd: this.orderTimeEnd
			        })
			        .then(res => {
			        .......
			        //折线图X轴数据为时间月份
			        this.chartone.xAxis[0].setCategories(categories);
			        })
		    },
		    //近页面调用时间控件默认时间,默认查询
		    mounted() {
		   		 this.dataTime();
				 this.query();
		    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值