vue js获取本周、本月、本年度的日期范围

先上效果图：

1.本周：

2.本月：

3.本年：

 封装js如下：

var now = new Date(); // 当前日期
var nowDayOfWeek = now.getDay(); // 今天本周的第几天
var nowDay = now.getDate(); // 当前日
var nowMonth = now.getMonth(); // 当前月
var nowYear = now.getYear(); // 当前年
nowYear += nowYear < 2000 ? 1900 : 0;
/**
 * @param 日期格式化
 * @returns {String}
 */
function formatDate(date) {
  var myyear = date.getFullYear();
  var mymonth = date.getMonth() + 1;
  var myweekday = date.getDate();

  if (mymonth < 10) {
    mymonth = "0" + mymonth;
  }
  if (myweekday < 10) {
    myweekday = "0" + myweekday;
  }
  return myyear + "-" + mymonth + "-" + myweekday;
}

/**
 * 获得当前日期
 *
 */
export function getNowDay() {
  return formatDate(new Date());
}
/**
 * 获得本周的开始时间
 *
 */
export function getStartDayOfWeek() {
  var day = nowDayOfWeek || 7;
  return formatDate(
    new Date(now.getFullYear(), nowMonth, nowDay + 1 - day)
  );
}

/**
 * 获得本周的结束时间
 *
 */
export function getEndDayOfWeek() {
  var day = nowDayOfWeek || 7;
  return formatDate(
    new Date(now.getFullYear(), nowMonth, nowDay + 7 - day)
  );
}

/**
 * 获得本月的开始时间
 *
 */
export function getStartDayOfMonth() {
  var monthStartDate = new Date(nowYear, nowMonth, 1);
  return formatDate(monthStartDate);
}

/**
 * 获得本月的结束时间
 *
 */
export function getEndDayOfMonth() {
  var monthEndDate = new Date(nowYear, nowMonth, getMonthDays());
  return formatDate(monthEndDate);
}

/**
 * 获得本月天数
 *
 */
export function getMonthDays() {
  var monthStartDate = new Date(nowYear, nowMonth, 1);
  var monthEndDate = new Date(nowYear, nowMonth + 1, 1);
  var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
  return days;
}

/**
 * 获取当前年份的第一天
 * @returns {string} 例如 2022-01-01
 */
export function getYearFirstDay() {
    var date = new Date();
    var year = date.getFullYear();
    return year + '-01-01'
}

/**
 * 获取当前年份的最后一天
 * @returns {string} 2022-12-31
 */
export function getYearLastDay(){
    var date = new Date();
    var year = date.getFullYear();
    return year + '-12-31'
}

vue代码如下：

        <el-date-picker
          v-if="selectTimeType === '0'"
          v-model="firstTime"
          value-format="yyyy-MM-dd"
          @change="onChangeFirstTime"
          clearable
          style="width:100%"
          type="daterange"
          align="right"
          unlink-panels
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

 return {
      pickerOptions: {
        shortcuts: [{
          text: '本周',
          onClick(picker) {
            const end = getEndDayOfWeek();
            const start = getStartDayOfWeek();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = getEndDayOfMonth();
            const start = getStartDayOfMonth();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本年度',
          onClick(picker) {
            // const end = new Date();
            // const start = new Date();
            // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            const start = getYearFirstDay()
            const end = getYearLastDay()
            picker.$emit('pick', [start, end]);
          }
        }]
}

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：正在跳转