vue3：获取1~12月份的第一天和最后一天

maowei-2001

已于 2024-07-19 14:30:19 修改

阅读量69

点赞数

文章标签： javascript 前端开发语言

于 2024-07-19 14:28:36 首次发布

本文链接：https://blog.csdn.net/m0_59246072/article/details/140548397

版权

1、在utils目录下新键一个.js文件，在该文件中写入方法

// 获取当月的第一天和最后一天
export function getMonthFirstAndLastDay(CurrentMonth) {
    var now = new Date();
    var strLink = "-";
    var year = now.getFullYear();
    var month = CurrentMonth;
    var day = now.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (day >= 1 && day <= 9) {
      day = "0" + day;
    }
    var firstDate = year + strLink + month + strLink + '01';
    var sysDate = year + strLink + month + strLink + day;
    var lastDay = getLastDay(year, month);
    var lastDate = year + strLink + month + strLink + lastDay;
    var returnArr = [firstDate,  lastDate];//以数组形式返回
    return returnArr;
}
function getLastDay(year,month){
  var new_year = year;
  var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
  if(month>12){//如果当前大于12月，则年份转到下一年
    new_month -=12;//月份减
    new_year++;//年份增
  }
  // 取当年当月对应的下个月的前一天，即当前月的最后一天
  var last_date = new Date(new_year,new_month,0).getDate();
  return last_date;
}

2、在外部导入使用

<template>
<el-row>
     <el-button 
        style="width:80px"
        v-for="(item,index) in monthlist" 
        @click="handleClickMonths(index)" 
        :key="index">
        {{item}}
    </el-button>
</el-row>

</template>





<script setup>

import {getMonthFirstAndLastDay} from "@/utils/time.js";

const monthlist = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

const handleClickMonths=(indexs)=>{
  let getDates=getMonthFirstAndLastDay(Number(indexs)+1)
  console.log("getDates",getDates)

}

</script>