Vue如何根据某个时间值获取当月的最后一天

工作中会用到日期组件,有时候选择结束日期只需要用户选择年月,然后需要程序自动补全当月的最后一天,生成yyyy-MM-dd的字符串格式传到后端。

// 纯JS实现

let getEndDateFn = (value) => { // 形参value值的格式为yyyy-MM-dd或yyyy-MM

let date = new Date(value);

let month = date.getMonth() + 1;

month = month < 10 ? "0" + month : month;

let dayEnd = new Date(date.getFullYear(), month, 0).getDate();

let dateValue = date.getFullYear() + "-" + month + "-" + dayEnd;

return dateValue ;

}

// 使用

let endDate = getEndDateFn("2024-01");

console.log(endDate);

还有一种我比较喜欢的方式,引入moment.js插件

// 第一步是安装moment

npm i moment-timezone

// 在页面引用moment

import moment from "moment-timezone";

// 要把moment写在data的return里

data() {

return {

moment,

}

}

/* 在方法里使用 */

// 获取当月第一天:

moment(currDate).startOf("month").format("YYYY-MM-DD")

// 获取当月最后一天:

moment(currDate).endOf("month").format("YYYY-MM-DD")

相关推荐
远山无期16 分钟前
解决Tailwind任意值滥用:规范化CSS开发体验
前端·css·eslint
用户542778485154025 分钟前
Vue 3 中开发高阶组件(HOC)与 Renderless 组件
前端
幼儿园老大35 分钟前
告别代码屎山!UniApp + Vue3 自动化规范:ESLint 9+ 扁平化配置全指南
javascript·vue.js
HIT_Weston39 分钟前
67、【Ubuntu】【Hugo】搭建私人博客(一)
前端·ubuntu·hugo
阿里巴啦1 小时前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
daols881 小时前
vue 甘特图 vxe-gantt table 连接线的用法详解
vue.js·甘特图·vxe-table
Liu.7741 小时前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|1 小时前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
开发者小天1 小时前
react的拖拽组件库dnd-kit
前端·react.js·前端框架
用户4445543654261 小时前
在Android开发中阅读源码的指导思路
前端