vue js自动计算时间跨度从当前日期往后一个月、三个月、半年、一年时间计算

功能效果

 选择一个月(是从当前日期往后开始计算不去除周末节假日)

 

用到的组件 

npm install moment -S
var moment = require('moment');
moment().format();
import moment from “moment”
moment().format();
  <el-radio-group v-model="form.period" @input="timeChange">
                    <el-radio :label="1">一个月</el-radio>
                    <el-radio :label="3">三个月</el-radio>
                    <el-radio :label="6">6个月</el-radio>
                    <el-radio :label="12">一年</el-radio>

                  </el-radio-group>


js 代码

import moment from 'moment';

  timeChange(val) {
      this.form.endTime = ''
      const date = new Date();
      // 开始日期都为当前系统日期
      this.form.startTime = moment(date).format('YYYY-MM-DD')
      // 获取当前时间前后一个月
      if (val) {
//val  为往后几个月
        const startDate = moment(date).add(val, 'month').startOf('month').format('YYYY-MM-DD');
        const lastDate = startDate.split('-')
        const nextyear = lastDate[0]
        const nextMonth = lastDate[1]
        // 结束日期
        this.form.endTime = nextyear + '-' + nextMonth + '-' + date.getDate()
      }
    },

抽个空随便记录下,不详细,不懂的V我ypz131023,领导盯着怕被抓

根据提供的引用内容,为了实现Vue3中的a-range时间跨度一年的效果,可以按照以下步骤进行操作。 首先,在业务开发场景中,el-date-picker允许的最大跨度为一年的需求,但elm-ui的API中没有相关限制,所以需要封装一个最大跨度一年的组件。\[1\] 其次,在组件的methods中定义处理时间范围的方法。可以使用getPickDate方法来获取选中的时间范围,使用disabledDate方法来禁用超过一年日期。\[2\] 然后,优化子组件的代码。可以使用v-on="$listeners"来代替子组件的@input="handleInput",以优化代码。同时,设置el-date-picker的相关属性,如value、clearable、type等。\[3\] 最后,实现效果。通过以上步骤,就可以在Vue3中实现a-range时间跨度一年的效果。 #### 引用[.reference_title] - *1* *3* [el-date-picker最大跨度一年组件封装](https://blog.csdn.net/weixin_43917792/article/details/116003776)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [处理Element 日期选择器el-date-picker 限制时间跨度一年](https://blog.csdn.net/qq_37831545/article/details/125522722)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值