js常规日期格式处理、月历渲染、倒计时函数

最新推荐文章于 2024-06-22 15:10:18 发布

chuzi1923

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量111

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/u/3559985/blog/995386

版权

标签： js JavaScript 日期处理函数工具学习

2016-11-29 10:04 271人阅读评论(0) 收藏举报

日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕竟我们一个特定的项目中，并不需要monent.js那么全的涵盖范围。另外，如果现在公司让你自己手写一个日历组件（月历、周历），日历组件中需要耦合我们的其他业务需求，如果有一个任务列表，当11月22号的待进行任务，我需要在日历上有一个绿色圆点，表示当天有待办事项。下面介绍一些常规的函数，希望对大家有用。

月历效果图

函数目录

getFormatDateStr 获得指定日期格式的字符串；
getDayPrevAfter 获得n天前/后的日期；
formatDateWithTimeZone 格式化日期带时区，ISO 8601；
countDownBySecond 倒计时；
monthSize 获得指定日期所在月的天数；
getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合；
getOneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始；

下面是详细的说明：

getFormatDateStr

[javascript] view plain copy
1. /**
2. * [zeroPadding 小于10的数字补0，必填]
3. * @param {[Int]} value [description]
4. * @return {[String]} [description]
5. */
6. export function zeroPadding(value){
7. return value < 10 ? `0${value}` : value;
8. }
10. /**
11. * [_isDateStrSeparatorCh 判断日期格式字符串的分隔符是否是中文]
12. * @param {[String]} str [必填]
13. * @return {[String]} [分隔符]
14. */
15. function _getDateStrSeparator(str, startIndex, endIndex) {
16. startIndex = startIndex ? startIndex : 4;
17. endIndex = endIndex ? endIndex : 5;
18. let separator = str.slice(startIndex, endIndex);
19. if (separator === '年' || separator === '月' ) {
20. separator = 'Ch';
21. }
22. return separator;
23. }
25. /**
26. * [_isDateStrSeparatorCh 判断日期格式字符串的分隔符是否是中文]
27. * @param {[String]} str [必填]
28. * @return {[String]} [分隔符]
29. */
30. function _isDateStrSeparatorCh(str) {
31. if ( str.indexOf('年')!=-1 || str.indexOf('月')!=-1 ) {
32. return true;
33. }
34. return false;
35. }
37. /**
38. * [getFormatDateStr 获得指定日期格式的字符串]
39. * @param {[String or Date]} date [要转换的日期，必填]
40. * @param {[String]} dateFormatStr [要转化的目标格式，必填，2016-11-22之间的分隔符可任意，可选项：
41. * 'yyyy-mm-dd hh:mm:ss','yyyy/mm/dd hh:mm:ss','yyyy.mm.dd hh:mm:ss','yyyy年mm月dd hh:mm:ss',
42. * 'yyyy-mm-dd hh:mm',
43. * 'mm-dd hh:mm',
44. * 'yyyy-mm-dd',
45. * 'mm-dd',
46. * 'hh:mm:ss',
47. * 'hh:mm'
48. * ]
49. * @return {[String]} [时间格式字符串]
50. */
51. export function getFormatDateStr(date, dateFormatStr) {
53. if ( !(date instanceof Date) ) {
54. if ( date.indexOf('-') != -1 ) {
55. date.replace(/\-/g,'/');
56. }
57. date = new Date(date);
58. }
60. dateFormatStr = dateFormatStr.toLowerCase();
61. if (!dateFormatStr){
62. return false;
63. }
65. let returnStr = '',
66. separator = _getDateStrSeparator(dateFormatStr),
67. year = date.getFullYear(),
68. month = date.getMonth() + 1,
69. day = date.getDate(),
70. hour = date.getHours(),
71. minute = date.getMinutes(),
72. second = date.getSeconds();
74. if ( /^yyyy(.{1})mm(.{1})dd hh:mm:ss$/.test(dateFormatStr) ) {
75. if (_isDateStrSeparatorCh(dateFormatStr)) {
76. returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
77. } else {
78. separator =
79. returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
80. }
81. returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
82. } else if ( /^yyyy(.{1})mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
83. if (_isDateStrSeparatorCh(dateFormatStr)) {
84. returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
85. } else {
86. returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
87. }
88. returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
89. } else if ( /^mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
90. if (_isDateStrSeparatorCh(dateFormatStr)) {
91. returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
92. } else {
93. separator = _getDateStrSeparator(dateFormatStr, 2, 3);
94. returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
95. }
96. returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
97. } else if ( /^yyyy(.{1})mm(.{1})dd$/.test(dateFormatStr) ) {
98. if (_isDateStrSeparatorCh(dateFormatStr)) {
99. returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
100. } else {
101. returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
102. }
103. } else if ( /^mm(.{1})dd$/.test(dateFormatStr) ) {
104. if (_isDateStrSeparatorCh(dateFormatStr)) {
105. returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
106. } else {
107. separator = _getDateStrSeparator(dateFormatStr, 2, 3);
108. returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
109. }
110. } else if ( /^hh:mm:ss$/.test(dateFormatStr) ) {
111. returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
112. } else if ( /^hh:mm$/.test(dateFormatStr) ) {
113. returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}`;
114. }
116. return returnStr;
118. }

getDayPrevAfter

[javascript] view plain copy
1. /**
2. * [getDayPrevAfter 获得n天前/后的日期]
3. * @param {[String]} date [日期，非必填参数，表示调用时的时间]
4. * @param {[String]} type [前一天还是后一天，非必填参数，默认后一天]
5. * @param {[Int]} daysNum [天数，非必填参数，默认一天]
6. * @return {[Date]} [description]
7. */
8. export function getDayPrevAfter(date, type, daysNum) {
10. date = date ? date : new Date();
11. type = type ? type : 'after';
12. daysNum = daysNum ? daysNum : 1;
14. if ( !(date instanceof Date) ) {
15. if ( date.indexOf('-') != -1 ) {
16. date.replace(/\-/g,'/');
17. }
18. date = new Date(date);
19. }
21. let returnDate = date;
22. if (type === 'prev') {
23. returnDate = new Date(date.getTime() - (daysNum * 24 * 60 * 60 * 1000));
24. } else if (type === 'after') {
25. returnDate = new Date(date.getTime() + (daysNum * 24 * 60 * 60 * 1000));
26. }
27. return returnDate;
29. }

formatDateWithTimeZon
[javascript] view plain copy
1. /**
2. * [formatDateWithTimeZone 格式化日期带时区，ISO 8601]
3. * @param {[Date]} date [日期，非必填参数，表示调用时的时间]
4. * @return {[String]} [ISO 8601格式的日期，example: 2016-11-21T14:09:15+08:00]
5. */
6. export function formatDateWithTimeZone(date) {
8. date = date ? date : new Date();
9. if ( !(date instanceof Date) ) {
10. if ( date.indexOf('-') != -1 ) {
11. date.replace(/\-/g,'/');
12. }
13. date = new Date(date);
14. }
16. let tzo = -date.getTimezoneOffset(),
17. dif = tzo >= 0 ? '+' : '-',
18. pad = function (num) {
19. let norm = Math.abs(Math.floor(num));
20. return zeroPadding(norm);
21. };
22. return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}${dif}${pad(tzo / 60)}:${pad(tzo % 60)}`;
24. }

countDownBySecond

[javascript] view plain copy
1. /**
2. * [countDownBySecond 倒计时]
3. * @param {[Int]} restSeconds [剩余秒数，必填]
4. * @param {[Int]} timeInterval [时间间隔，非必填，默认1000ms]
5. * @param {[Function]} func [每倒计时一次，就需要执行一次的回调函数名，非必填]
6. * @param {[Function]} endFun [倒计时结束需要执行的函数名，非必填]
7. * @return {[null]} [无返回值]
8. */
9. export function countDownBySecond(restSeconds, timeInterval, func, endCallback) {
10. let timer = null;
11. let total = restSeconds;
12. timeInterval = timeInterval ? timeInterval : 1000;
13. timer = setInterval(function() {
14. --total;
15. if (total <= 0) {
16. clearInterval(timer);
17. endCallback && endCallback();
18. }
19. func && func(total);
20. }, timeInterval);
21. }

monthSize

[javascript] view plain copy
1. /**
2. * [monthSize 获得指定日期所在月的天数]
3. * @param {[Date]} oDate [指定的日期，非必填，默认为当天]
4. * @return {[Int]} [总天数]
5. */
6. function monthSize(oDate) {
7. oDate = oDate ? oDate : new Date();
8. let year = oDate.getFullYear(),
9. month = oDate.getMonth(),
10. _oDate = new Date();
11. _oDate.setFullYear(year);
12. _oDate.setMonth(month + 1, 0);
13. return _oDate.getDate();
14. }

getCalendarMonth

[javascript] view plain copy
1. /**
2. * [getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合，形如：
3. * [{
4. "date": "2016/10/30", //日期字符串
5. "dateNum": 30, //日
6. "isCurMonth": false, //是否当前月
7. "weekIndex": 0 //是本月的第几周，下标从0开始
8. },{
9. "date": "2016/10/31",
10. "dateNum": 31,
11. "isCurMonth": false,
12. "weekIndex": 0
13. },{
14. "date": "2016/11/1",
15. "dateNum": 1,
16. "day": 2,
17. "isCurMonth": true,
18. "isToday": false,
19. "weekIndex": 0
20. }]
21. ]
22. * @param {[Date]} param [指定的日期，非必填，默认为当天]
23. * @return {[Array]} [获得指定日期所在月的第一周到第四/五周的数据组合]
24. */
25. export function getCalendarMonth(date) {
26. date = date ? date : new Date();
27. let y = date.getFullYear();
28. let m = date.getMonth();
29. let _m;
30. let firstDay = new Date(y, m, 1).getDay(); //当月第一天周期
31. let days = monthSize(date);//当月天数
32. let prevMonthDays = monthSize(new Date(y, m - 1));//上月天数
33. let initPrevDay = prevMonthDays - firstDay;
34. let lines = Math.ceil((firstDay + days) / 7);
35. _m = new Array(lines * 7);
36. let nextMonthDay = 0;
38. for (let i = 0; i < _m.length; i++) {
39. let weekIndex = parseInt(i / 7);
40. if (i < firstDay) {
41. let date = ++initPrevDay;
42. if (m === 0 && date > 7) {
43. _m[i] = {
44. isCurMonth: false,
45. dateNum: date,
46. weekIndex,
47. date: `${y - 1}/${12}/${date}`
48. };
49. } else {
50. _m[i] = {
51. isCurMonth: false,
52. dateNum: date,
53. weekIndex,
54. date: `${y}/${m}/${date}`
55. };
56. }
57. } else if (i >= (firstDay + days)) {
58. let date = ++nextMonthDay;
60. if (m === 11 && date <= 7) {
61. _m[i] = {
62. isCurMonth: false,
63. dateNum: date,
64. weekIndex,
65. date: `${y + 1}/${1}/${date}`
66. };
67. } else {
68. _m[i] = {
69. isCurMonth: false,
70. dateNum: date,
71. weekIndex,
72. date: `${y}/${m + 2}/${date}`
73. };
74. }
75. } else {
76. let _date = i - firstDay + 1;
77. let today = new Date();
78. let today_y = today.getFullYear();
79. let today_m = today.getMonth();
80. let today_d = today.getDate();
81. let isToday = today_y === y && today_m === m && today_d === _date ? true : false;
82. _m[i] = {
83. dateNum: _date, //日期
84. day: i % 7, //周期
85. weekIndex,
86. isCurMonth: true,
87. isToday,
88. date: `${y}/${m + 1}/${_date}`
89. };
90. }
91. }
92. return _m;
93. }

getOneDateWeekIndex

[javascript] view plain copy
1. /**
2. * [getOneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始]
3. * @param {[Date]} date [指定的日期，非必填，默认为当天]
4. * @return {[Int]} [在该月的第几周]
5. */
6. export function getOneDateWeekIndex(date) {
7. date = date ? date : new Date();
8. let monthDays = getCalendarMonth(date);
9. let dateString = getFormatDateStr(date, '/', true, false, false);
10. let returnDate = monthDays.filter(item => {
11. return item.date === dateString;
12. });
13. let weekIndex = returnDate[0].weekIndex;
14. return weekIndex ? weekIndex : 0;
15. }

转载于:https://my.oschina.net/u/3559985/blog/995386

chuzi1923

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js常规日期格式处理、月历渲染、倒计时函数

标签：jsJavaScript日期处理函数工具学习 2016-11-29 10:04271人阅读评论(0)收藏举报版权声明：本文为博主原创文章，未经博主允许不得转载。日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕...
复制链接

扫一扫