前言

在前端开发工作中,服务端返回的时间数据或者你传递给服务端的时间参数经常会遇到时间格式转换及处理问题。这里分享一些我收集到的一些处理方法,方便日后工作中快速找到。先附上必须了解的知识内置对象传送门https://www.w3school.com.cn/js/js_dates.asp

目录

  • 时间格式化
  • 获取当年的第一天
  • 获取指定年指定月份的第一天
  • 获取指定年指定月份的最后一天
  • 获取当前季度的第一天
  • 获取两个日期的相差天数
  • 获取指定的某一天所在的星期范围
  • 获取指定的某一天还差几天过年
  • 获取指定的某一天是星期几
  • 比较传入的两个日期中第一个日期是否比另外一个日期早
  • 计算某一时间偏移后的日期

正文

时间格式化

      

 1 Date.prototype.formatDate=function(format){
2 var o = {
3 "M+": this.getMonth()+1 , //月份
4 "d+": this.getDate(), //日
5 "h+": this.getHours(), //小时
6 "m+": this.getMinutes(), //分
7 "s+": this.getSeconds(), //秒
8 "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
9 "S": this.getMilliseconds() // 毫秒
10 };
11 // 根据y的长度来截取年
12 if (/(y+)/.test(format)){
13 //console.log(RegExp.$1);yyyy
14 format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
15 }
16
17 // console.log(format);1999-MM-DD
18 for (var k in o){
19 if (new RegExp("(" + k + ")").test(format))
20 format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
21 }
22 return format;
23 }
24 // 用法:
25 var time1 = new Date(99,3,2).formatDate("yyyy-MM-dd");
26 var time2 = new Date().formatDate("yyyy-MM-dd hh:mm:ss");
27 console.log(time1);//1999-04-02
28 console.log(time2);//2020-11-15 21:21:55

获取当年的第一天

 function getFirstDayOfYear () {
var date = new Date();
date.setDate(1);
date.setMonth(0);
return date.formatDate('yyyy-MM-dd');;
}
console.log(getFirstDayOfYear())//2020-1-1

获取指定年指定月份的第一天

function getCurrentMonthFirstDay(currentMonth) {
var endDate=new Date(currentMonth)
var month=endDate.getMonth();
var currentMonthFirstDay=new Date(endDate.getFullYear(),month,1)
var firstDate=currentMonthFirstDay.toLocaleDateString().replace(new RegExp("/","g"),"-")
return firstDate
}
console.log(getCurrentMonthFirstDay('2020-11'))//2020-11-1

获取指定年指定月的最后一天

function getCurrentMonthLastDay(currentMonth) {
var endDate=new Date(currentMonth)
var month=endDate.getMonth();
var nextMonth=++month;
var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1);
var oneDay=1000*60*60*24;
var dateString=new Date(nextMonthFirstDay-oneDay)
return dateString.toLocaleDateString().replace(new RegExp("/","g"),"-")
}
console.log(getCurrentMonthLastDay("2020-11"))//2020-10-30

获取当前季度的第一天

function getFirstDayOfSeason () {
var date = new Date();
var month = date.getMonth();
if(month <3 ){
date.setMonth(0);
}else if(2 < month && month < 6){
date.setMonth(3);
}else if(5 < month && month < 9){
date.setMonth(6);
}else if(8 < month && month < 11){
date.setMonth(9);
}
date.setDate(1);
return date.formatDate('yyyy-MM-dd');;
}
console.log(getFirstDayOfSeason())//2020-10-01

获取两个日期的相差天数

function getDiff(startDate, endDate) {
var stime = Date.parse(new Date(startDate));
var etime = Date.parse(new Date(endDate));
// 两个时间戳相差的毫秒数
var usedTime = etime - stime;
// 计算相差的天数
var days = Math.floor(usedTime / (24 * 3600 * 1000));
// 计算天数后剩余的毫秒数
var leave1 = usedTime % (24 * 3600 * 1000);
// 计算出小时数
var hours = Math.floor(leave1 / (3600 * 1000));
// 计算小时数后剩余的毫秒数
var leave2 = leave1 % (3600 * 1000);
// 计算相差分钟数
var minutes = Math.floor(leave2 / (60 * 1000));
var time = days + "天" + hours + "时" + minutes + "分";
return time;
}
console.log(getDiff("2020-10-01","2020-11-20"))//50天0时0分

获取指定的某一天所在的星期范围

function getWeekRange(date) {
if(!date) return
var now = new Date(date);
var nowDayOfWeek = now.getDay(); // 星期日—>六(0->6)
var nowDay = now.getDate();
var nowMonth = now.getMonth();
var nowYear = now.getYear(); // 2019年是119
nowYear += (nowYear < 2000) ? 1900 : 0;
var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek+1); // 这周的周五
var weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek)); // 7- 这周的周日 && 用5- 得到这的周五
return weekStartDate.formatDate('yyyy-MM-dd') + " 至 " + weekEndDate.formatDate('yyyy-MM-dd');
}
console.log(getWeekRange("2020-11-11"))//2020-11-09 至 2020-11-15

获取指定的某一天还差几天过年

 function restDayOfYear() {
var fullyear = new Date().getFullYear();
var nextyear = fullyear + 1;
var lastday = new Date(new Date(nextyear,0,1) - 1); //本年的最后一毫秒:
var now = new Date();
var diff = lastday - now; //毫秒数
return Math.ceil(diff / (1000 * 60 * 60 * 24));
}
console.log(restDayOfYear("2020-11-15"))//47

获取指定的某一天是星期几

function getWeekZh(value) {
var dateArray = value.split("-");
var zhWeek = "星期" + "日一二三四五六".charAt(new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]).getDay());
return zhWeek
}
console.log(getWeekZh("2020-10-10"))//星期六

比较传入的两个日期中第一个日期是否比另外一个日期早

 function compareDate(firstDate,secondDate){
var arrayD1 = firstDate.split("-");
var date1 = new Date(arrayD1[0],arrayD1[1],arrayD1[2]);
var arrayD2 = secondDate.split("-");
var date2 = new Date(arrayD2[0],arrayD2[1],arrayD2[2]);
//日期对象可以直接进行比较
if(date1 < date2) return true;
return false;
}
console.log(compareDate("2020-10-10","2020-11-15"))//true

计算某一时间偏移后的日期

 function getAfterDate(time,count) {
time.setDate(time.getDate() + count);//获取N天后的日期
var date = new Date(+time + 8 * 3600 * 1000);
return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '.');
}
console.log(getAfterDate(new Date(),100))// 2021.02.23 22:00:36

js--前端开发工作中常见的时间处理问题的更多相关文章

  1. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  2. MySQL 中常见的时间类型有三种 DATE, DATETIME 和 TIMESTAMP

    MySQL 中常见的时间类型有三种 DATE, DATETIME 和 TIMESTAMP,其中 DATE 类型用于表示日期,但是不会包含时间,格式为 YYYY-MM-DD,而 DATETIME 和 T ...

  3. Visual Studio 2015初体验——前端开发工作的问题

    前言 因为后台项目开发适用的VS2015,为了跟后台开发配合,前端部门也统一从VS2013升级到了VS2015. 因为C盘空间不足要先卸载,这里就不说卸载2013时花了多长时间,只说安装2015时用了 ...

  4. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  5. [前端] 记录工作中遇到的各种问题(Bug,总结,记录)

    最近一年,在开发实践过程中遇到了不少问题,大多都能得到解决 部分知其原理,部分只能做到解决问题,而半年前遇到的问题,或多或少都忘得差不多了 是该记录一下一些问题,防止再遇到就得再查资料了 1. 浏览器 ...

  6. JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!

    前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17 ...

  7. FIS.js前端开发的使用说明文档

    文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构 ...

  8. 记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

    我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...

  9. 总结工作中常见的linux命令

    本文是总结下自己在工作中遇到的常见linux 命令,会持续更新! 1.文件路径切换 进入 cd 返回上一级  cd .. 2.复制 cp 源文件名 目标文件夹 cp log.log test5 3.编 ...

随机推荐

  1. 02Java写一个hello world

    新建一个.text文件 输入并保存如下代码: public class HelloWorld{ public static void main(String[] args){ System.out.p ...

  2. http://www.etymon.cn/yingyucigen/3093.html

    import requests import lxml.etree as etree import xml.etree.ElementTree as ET # 详情页 # 3093-148 # htt ...

  3. 使用进程池模拟多进程爬取url获取数据,使用进程绑定的回调函数去处理数据

    1 # 使用requests请求网页,爬取网页的内容 2 3 # 模拟使用进程池模拟多进程爬取网页获取数据,使用进程绑定的回调函数去处理数据 4 5 import requests 6 from mu ...

  4. spring cloud gateway 启动报错,Failed to bind on [0.0.0.0:xxx] bind(..) failed: 权限不够

    最近把操作系统迁移到了deepin,不得不说Linux中需要学习的还是有很多的,本地启动网关的时候就遇到一个坑,特此记录一下,报错信息. Caused by: reactor.netty.Channe ...

  5. Javaweb项目页面实时显示后台处理结果

    http://www.cnblogs.com/dong-xu/p/6701271.html 此博文甚好,项目参照博主代码可实现. 前端页面: <%@ page language="ja ...

  6. Mysql数据安全备份

    数据安全备份的意义 在出现意外的时候(硬盘损坏.断点.黑客攻击),以便数据的恢复 导出生产的数据以便研发人员或者测试人员测试学习 高权限的人员那操作失误导致数据丢失,以便恢复 备份类型 完全备份:对整 ...

  7. ABBYY FineReader 15 PDF文档查看功能

    PDF文档查看功能是ABBYY FineReader 15(Windows系统)OCR文字识别软件中PDF编辑器的一项基础功能,可供用户查看,搜索PDF文档,无需进入编辑模式,也可复制其中的文本,图片 ...

  8. 教你怎么设置Vegas渲染输出的选定范围

    在制作视频时,很多用户进行到渲染时,常常会发生这样那样的问题,导致导出的视频效果不甚理想.归结原因,还是用户在渲染输出时的选定范围存在问题. 接下来小编就为大家具体介绍下:vegas如何设置渲染输出的 ...

  9. guitar pro系列教程(二十):Guitar Pro使用技巧之使用向导

    本章节将采用图文结合的方式为大家讲述{cms_selflink page='index' text='Guitar Pro'}使用技巧里面的使用向导的相关知识,有兴趣的朋友可以一起来学习哦. 当你创建 ...

  10. H5系列之svg

    svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的. 也就是,他依赖分辨率,会根据分辨率来决定图形是否清 ...