Vue通过moment插件实现获取当前月的第一天和最后一天

 更新时间:2023年10月31日 09:34:33   作者:qq_42753983  
这篇文章主要介绍了Vue 结合插件moment 实现获取当前月的第一天和最后一天,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

Vue 结合插件moment 实现获取当前月的第一天和最后一天

1.下载依赖moment
   npm install moment
2. 在当前页面使用插件moment
   import moment from "moment";
3.实际操作
  getDate(val) {
		let month = val.slice(5);
		//当前日期
		let time = new Date();
		//选取的月份
		let monthNum = month;
		//某月第一天
		let startTime = moment(time).month(monthNum - 1).date(1).startOf("month")
		                .format("YYYY-MM-DD");
		//某月最后一天
		let endTime = moment(time).month(monthNum - 1).date(1).endOf("month")
				      .format("YYYY-MM-DD");
		//日期选择器 中的值
		this.dateRange = startTime + "~" + endTime;
	},
4.使用过程
  调用这个方法传参数就可以,this.getDate(val)
  val为这种格式  '2022-05'

 以下为扩展知识

  1、获取当前时间 
  moment().format('YYYY-MM-DD HH:mm:ss')
  2、获取当月的一号
  moment().startOf('months').format('YYYY-MM-DD')
  3、获取当月的最后一天
  moment().endOf('months').format('YYYY-MM-DD')
  4、获取上个月的一号 
  moment().subtract(1, 'months').startOf('months').format('YYYY-MM-DD')
  5、获取上个月的最后一天
  moment().subtract(1, 'months').endOf('months').format('YYYY-MM-DD')
  6、获取当前年
  moment().year()
  7、获取上一年
  moment().add(-1, 'years').format('YYYY')
  8、获取下一年
  moment().add(1, 'years').format('YYYY')
  9、获取去年的月初
  moment().add(-1, 'years').startOf('months').format('YYYY-MM-DD')
  10、获取去年的月末
  moment().add(-1, 'years').month(11).endOf('months').format('YYYY-MM-DD')

到此这篇关于Vue 结合插件moment 实现获取当前月的第一天和最后一天的文章就介绍到这了,更多相关vue获取当前月的第一天和最后一天内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ElementUI中el-tree节点的操作的实现

    ElementUI中el-tree节点的操作的实现

    这篇文章主要介绍了ElementUI中el-tree节点的操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue中的echarts实现宽度自适应的解决方案

    vue中的echarts实现宽度自适应的解决方案

    这篇文章主要介绍了vue中的echarts实现宽度自适应,本文给大家分享实现方案,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • 从前端Vue到后端Java防重复提交的全面解决方案

    从前端Vue到后端Java防重复提交的全面解决方案

    这篇文章主要给大家介绍了关于从前端Vue到后端Java防重复提交的全面解决方案,通过示例讲解了包括禁用提交按钮、表单令牌、防抖与节流等前端技术,以及表单令牌验证、数据库唯一约束、事务隔离与锁机制等后端技术,需要的朋友可以参考下
    2025-05-05
  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    vue项目中我们可以通过行内样式进行动态修改样式,下面这篇文章主要给大家介绍了关于vue中如何使用定义好的变量设置css样式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Vue3中内置组件Teleport的基本使用与典型案例

    Vue3中内置组件Teleport的基本使用与典型案例

    Teleport是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术,下面这篇文章主要给大家介绍了关于Vue3中内置组件Teleport的基本使用与典型案例的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue+element ui实现锚点定位

    vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue3中keep-alive缓存问题的解决方法

    Vue3中keep-alive缓存问题的解决方法

    文章主要介绍了在Vue3中使用keep-alive组件时的缓存问题及其解决方法,包括手动清除缓存、使用VueDevtools调试、自定义keep-alive逻辑、升级Vue版本、使用路由重定向和记录keep-alive状态等方法,帮助了解决keep-alive缓存问题,保持组件高效性和维护性
    2026-04-04
  • Vue UI创建项目详细步骤

    Vue UI创建项目详细步骤

    本文主要介绍了Vue UI创建项目详细步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 解决vue的touchStart事件及click事件冲突问题

    解决vue的touchStart事件及click事件冲突问题

    这篇文章主要介绍了解决vue的touchStart事件及click事件冲突问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue-cli3.X使用px2 rem遇到的问题及解决方法

    Vue-cli3.X使用px2 rem遇到的问题及解决方法

    这篇文章主要介绍了Vue-cli3.X使用px2rem遇到的问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论