JavaScript 关于 Date

JavaScript 关于 Date,第1张

前言

此,主要是记录自己平时会常用到的一些Date *** 作方法封装,以及Date中比较好用的一些方法运用,希望能帮助到你。

学习路径:MDN-Date(MDN上面有详细的介绍属性语法,感兴趣可以点过去看看)

备注:当然外面也有很多成熟好用的日期库(官方推荐moment.js),如果你的项目日期方面使用的比较复杂频繁,就没必要自己去写js了(自己有特殊需求的该写的还得写哈哈)

目录  

1.获取时间戳

2.获取某年的第一天和最后一天的日期

3.获取某年某月的第一天和最后一天的日期

4.从当前时间往后推年份,月份,天数

5.获取某年的所有日期

6.获取某月有多少周

7.当前日期是这个月的第几周

8.获取某年有多少周

9.当前日期是年的第几周

10.根据周数取时间

11.闰年平年判断

12.日期格式化


正文 1.获取时间戳
      //(当前时间时间戳) 返回自 1970-1-1 00:00:00 至今所经过的毫秒数。
      Date.now();
      /**
       * 解析一个表示日期的字符串,并返回从 1970-1-1 00:00:00 所经过的毫秒数。
       * dateString:2022-10-10,2022-10,2022 都可以
       */
      //显式调用:
      Date.parse(dateString); //*备注: 由于浏览器差异和不一致,强烈建议不要使用Date.parse解析字符串。
      //隐式调用:
      new Date(dateString).getTime();

      console.log(Date.now()); //1652068607028
      console.log(Date.parse("2022-10-10")); //1652068607028
      console.log(new Date("2022-10-10 10:00:00").getTime()); //1665367200000
2.获取某年的第一天和最后一天的日期
      var date = new Date();
      // 某年第一天 2022/1/1 00:00:00
      console.log(new Date(date.getFullYear(), 0, 1));
      // 某年最后一天 2022/12/31 00:00:00
      console.log(new Date(date.getFullYear(), 12, 0));
3.获取某年某月的第一天和最后一天的日期
      //备注:月份位置的传值是从0-11,所以如果时截取的字符串记得要减一,如:2022-10-10
      var date = new Date();
      //某月第一天 2022/5/1 00:00:00
      console.log(new Date(date.getFullYear(), date.getMonth(), 1).toLocaleString());
      //某月最后天 2022/5/31 00:00:00
      console.log(new Date(date.getFullYear(), date.getMonth() + 1, 0).toLocaleString());
4.从当前时间往后推年份,月份,天数
    //备注:用Date自带的实例方法去处理不用考虑每个月不同天数,返回的也是时间格式,不用格式转来转去
    var date= new Date();//2022/5/12 11:36:21 
    //往后推三年—— +-3
    date.setFullYear(date.getFullYear()-3);
    console.log(date.toLocaleString());//2019/5/12 11:35:56
    //往后推三个月—— +-3
    var date= new Date();//2022/5/12 11:38:32
    date.setMonth(date.getMonth()-3);
    console.log(date.toLocaleString(0));//2022/2/12 11:38:32
    //往后推三天—— +-3
    var date= new Date();//2022/5/12 11:38:32
    date.setDate(date.getDate()-3);
    console.log(date.toLocaleString(0));//2022/5/9 11:38:32
5.获取某年的所有日期
      function getYear(date) {
        let o = {};
        let y = date.getFullYear();
        // var i = new Date(y, 0, 0);
        for (let m = 1; m <= 12; m++) {
          //单独某月的日期
          for (let d = 1; d <= new Date(y, m, 0).getDate(); d++) {
            var t = y + "-" + replenish(m) + "-" + replenish(d); //**这种固定死了格式,如果要自定义格式可以用下面注释这种方式
            // i.setDate(i.getDate() + 1);
            // var t = i.toLocaleString();//toLocaleString()是方便观察,格式可以用文章下面的格式化方法formatDate()
            o[m] ? o[m].push(t) : (o[m] = [t]); //初始化
          }
        }
        return o;
      }
      function replenish(str) {
        var len = str.toString().length;
        return len < 2 ? "0" + str : str;
      }
      console.log(getYear(new Date())); //{1:['2022-01-01,...'],2:['2022-02-01...']...}
6.获取某月有多少周
  //当前月的周对象
  function getCurrentMonthWeek(date) {
    var y = date.getFullYear();
    var m = date.getMonth();
    var w = new Date(y, m, 1).getDay();
    var o = {},  n = 1;
    for (let i = 1; i <= new Date(y, m + 1, 0).getDate(); i++) {
      if (i !== 1&&w === 1) n++;
      if (w === 7) w = 0;
      w++;
      var curDay = new Date(y, m, i); //也可以自己拼接就不用new了
      o[n] ? o[n].push(curDay) : (o[n] = [curDay]);
    }
    return o;
  }
  var date = new Date();
  console.log(getCurrentMonthWeek(new Date('2022-06-01')));//{1:[Wed Jun 01 2022 00:00:00 GMT+0800 (GMT+08:00)...], 2: Array(7), 3: Array(7), 4: Array(7), 5: Array(4)}
7.当前日期是这个月的第几周
    //当前月的周对象 
    var date = new Date("2022-05-09");
    var weeks = getCurrentMonthWeek(date);//上面获取月中周数的方法
    console.log(weeks);
    var ind = Object.values(weeks).findIndex(
      (x) => ~x.indexOf(date.toLocaleDateString())
    );
    console.log(Object.keys(weeks)[ind]); //3
8.获取某年有多少周
/**
     * 备注:我这里取某年第一周按照,星期四规则取,
     * 即当前一号小于或等于星期四那么上一年的最后几天属于当前年的第一周内,
     * 反之当前年前几号时间属于去年的最后一周
     */
    var y = "2020";
    //**只返回对应年份的周数
    function getWeek(year) {
      var dt = new Date(year, 0, 1);
      var et = new Date(year, 12, 0).getTime(); //最后一天
      var d = dt.getDay() || 7;
      var w = d <= 4 ? 1 : 0; //周四在当前年份,那么跨年的那个星期就属于当前年
      dt.setDate(dt.getDate() + (4 - d)); //当前年第一个周四
      while (true) {
        dt.setDate(dt.getDate() + 7); //下一周
        if (dt.getTime() > et) break;
        w += 1;
      }
      return w;
    }
    console.log(getWeek(y)); //53

    //**返回对应年份周数及对应的日期对象
    function getWeekNew(year) {
      var dt = new Date(year, 0, 1);
      var et = new Date(year, 12, 0).getTime();
      var d = dt.getDay() || 7;
      var w = 1;
      var o = {};
      //第一周的前一天(进循环会直接++所以取了前一天)
      if (d <= 4) dt.setDate(dt.getDate() - d);
      else dt.setDate(dt.getDate() + (7 - d));

      while (true) {
        dt.setDate(dt.getDate() + 1); //+1
        o[w]
          ? o[w].push(dt.toLocaleDateString()) //dt.toLocaleDateString()这里的日期格式可以自己拼接,
          : (o[w] = [dt.toLocaleDateString()]); //或者使用本文下面的日期格式化方法toLocaleString_Date(dt),

        //最后一天小于星期四,删除掉不完整的周()
        if (dt.getTime() === et && (dt.getDay() || 7) < 4) {
          delete o[w];
          return o;
        }
        //取整周
        if ((dt.getDay() || 7) == 7) {
          if (dt.getTime() >= et) return o;
          w += 1;
        }
      }
    }
    console.log(getWeekNew(y)); //{1:['2019/12/30', '2019/12/31', '2020/1/1'..],2:[...],...}
9.当前日期是年的第几周
    //当前月的周对象
    function getCrrut(date) {
      var year = date.getFullYear();
      var weeks = getWeekNew(date.getFullYear());//上面的方法
      var month = date.getMonth();
      var ind = Object.values(weeks).findIndex(
        (x) => ~x.indexOf(date.toLocaleDateString())//date.toLocaleDateString()这里取时间要跟weeks对象类型相同
      );
      if (~ind) return year + "年 第" + (ind + 1) + "周";
      
      //下面主要是防止取到年初或者年尾日期且不在当前年的周(weeks)对象内而出现0周的情况
      if (month < 11) {
        year -= 1;
        weeks = getWeekNew(year);
        ind = Object.values(weeks).findIndex(
          (x) => ~x.indexOf(date.toLocaleDateString())
        );
      } else {
        year += 1;
        weeks = getWeekNew(year);
        ind = Object.values(weeks).findIndex(
          (x) => ~x.indexOf(date.toLocaleDateString())
        );
      }
      return year + "年 第" + (ind + 1) + "周";
    }
    var date = new Date();
    console.log(getCrrut(date));
10.根据周数取时间
    //如果想根据周去取时间的话,那就通过 weeks对象去取
    var weeks = getWeekNew(date.getFullYear());//文本上面的方法
    //取第12周数据
    console.log(weeks[12]);//["2010/3/22","2010/3/23"...]
11.闰年平年判断
      var day = new Date();
      //1.闰年平年判断
      function getCommonYearsAndLeapYears(date) {
        try {
          var year = date.getFullYear();
          var n = year % 100 != 0 ? 4 : 400;
          console.log(year);
          return year % n == 0 ? "闰年" : "平年";
        } catch (error) {
          return alert("数据异常");
        }
      }
      //console.log( getCommonYearsAndLeapYears(new Date('2016')));
12.日期格式化

   *常规方法(下面还有有一个简单点的处理方法)

      /**稳妥一点的办法  yyyy-MM-dd hh:mm:ss
       * date:时间
       * type: yyyy-MM-dd hh:mm:ss
       * 当然如果有需要的话可以直接绑定到原型上面
       * Date.prototype.format=formatDate
       */
      function formatDate(date = new Date(), type = "yyyy-MM-dd hh:mm:ss") {
        if (Object.prototype.toString.call(this) == "[object Date]")
          date = this;
        if (date == "Invalid Date")
          return alert("日期格式有问题");
        var o = {
          yyyy: date.getFullYear(), //年
          MM: date.getMonth() + 1, //月
          dd: date.getDate(), //日
          hh: date.getHours(), //24小时制
          HH: date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, //12小时制
          mm: date.getMinutes(), //分
          ss: date.getSeconds(), //秒
          ms: date.getMilliseconds(), //毫秒
        };
        for (var i in o) {
          type = type.replaceAll(i, replenish(o[i]));
        }
        return type;
      }
      function replenish(str) {
        var len = str.toString().length;
        return len < 2 ? "0" + str : str;
      }
      /**
       * 有需要可以绑定到原型上(多人开发,有可能会命名冲突需要沟通好)
       * Date.prototype.format=formatDate;
       * console.log(new Date().format());//2022-05-09 16:37:28
       * 当作方法使用
       * console.log(formatDate("yyyy-MM-dd hh:mm:ss"));//2022-05-09 16:24:24
       */
      console.log(formatDate()); //2022-05-09 16:24:24
      console.log(formatDate(new Date(), "yyyy年MM月dd日 wk"));//2022年05月09日 星期三

   *简单使用方法 (如果要考虑兼容底版本浏览器,比如ie9已下之类不建议使用以下方法)

/**
       * 如果你的需求很简单并且不怎么常用,不妨试试Date自带的方法
       * 备注:下面的方法不兼容ie9以下的,如果要考虑兼容,可能不太行
       * Date.prototype.toLocaleDateString() :返回日期字符串 '2022/5/9'
       * Date.prototype.toLocaleString()  :返回整个日期对象字符串 '2022/5/9 16:43:03'
       * Date.prototype.toLocaleTimeString()  :返回时间字符串 '16:43:03'
       */
      var date = new Date(); 
      //options 根据属性值显示不同的效果,设置options后会覆盖掉上面三个方法的默认显示,所以我就举toLocaleString一个例子
      var options = {
        // weekday: "long",//星期,慎用会影响其他字段的格式
        year: "numeric", //年
        month: "2-digit", //月
        day: "2-digit", //天
        hour: "numeric", //时
        hour12: false, //是否12小时制度
        minute: "numeric", //分
        second: "numeric", //秒
      };
      //显示值就根据options参数决定,不要就注释
      console.log(date.toLocaleString()); //2022/5/9 16:56:46
      console.log(date.toLocaleString(undefined, options)); //2022/05/09 16:59:21
      console.log(date.toLocaleString(undefined, options).replaceAll("/", "-")); //2022-05-09 16:59:21
      //取消options.weekday的注释,日期后缀会被强制转换
      console.log(date.toLocaleString(undefined, { ...options, weekday: "long" }));//2022年05月09日星期一 16:57:54

      // 扩展一下(大写,农历)
      //  var intl = new Intl.DateTimeFormat('zh-u-nu-hanidec-ca-chinese', options)
      // console.log(date.toLocaleDateString("zh-u-nu-hanidec", options));//大写 二〇二二/〇五/〇九 一七:一五:四四
      // console.log(date.toLocaleDateString("zh-u-ca-chinese", options));//农历 2022年四月09 17:15:44
      // console.log(date.toLocaleDateString('zh-u-nu-hanidec-ca-chinese', options))//大写的农历 二〇二二年四月〇九 一七:一五:四四
      // console.log(date.toLocaleDateString('zh-u-nu-hanidec-ca-chinese', options))//大写的农历(带星期) 二〇二二壬寅年四月〇九,星期一 一七:四三:三二

      //使用频繁的话用intl代替上面的调用可以提高性能
      // var intl = new Intl.DateTimeFormat('zh-u-ca-chinese', options)//2022年四月09 17:46:50
      // console.log(intl.format(date))

  * 方法封装

    var options = {
      // weekday: "long",//星期,慎用会影响其他字段的格式
      year: "numeric", //年
      month: "2-digit", //月
      day: "2-digit", //天
      hour: "numeric", //时
      hour12: false, //是否12小时制度
      minute: "numeric", //分
      second: "numeric", //秒
    };

    var intl = new Intl.DateTimeFormat(undefined, options); //undefined 取默认语言
    function toLocaleString_Date(date) {
      return intl.format(date).replaceAll("/", "-");
    }
    console.log(toLocaleString_Date(new Date())); //2022-05-12 11:01:08,不需要时分秒可以自行调节options

对上面options参数感兴趣的点我

后续待补 

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/940574.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存