jQuery+Day.js獲取指定日期範圍按周劃分資訊
阿新 • • 發佈：2020-07-06
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試標題</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script> <script src="https://unpkg.com/[email protected]/plugin/isoWeek.js"></script> <script src="https://unpkg.com/[email protected]/plugin/weekOfYear.js"></script> <script src="https://unpkg.com/[email protected]/plugin/weekYear.js"></script> <script src="https://unpkg.com/[email protected]/plugin/dayOfYear.js"></script> <script src="https://unpkg.com/[email protected]/plugin/isLeapYear.js"></script> <script src="https://unpkg.com/[email protected]/plugin/isoWeeksInYear.js"></script> <script src="https://unpkg.com/[email protected]/plugin/isSameOrBefore.js"></script> <script src="https://unpkg.com/[email protected]/plugin/isSameOrAfter.js"></script> <script> dayjs.extend(window.dayjs_plugin_weekOfYear) dayjs.extend(window.dayjs_plugin_dayOfYear) dayjs.extend(window.dayjs_plugin_weekYear) dayjs.extend(window.dayjs_plugin_isoWeek) dayjs.extend(window.dayjs_plugin_isLeapYear) dayjs.extend(window.dayjs_plugin_isoWeeksInYear) dayjs.extend(window.dayjs_plugin_isSameOrBefore) dayjs.extend(window.dayjs_plugin_isSameOrAfter) </script> <script> $(document).ready(function () { $('#button').on('click', function () { var startTime = $('#startTime').val(); var endTime = $('#endTime').val(); $('#gridTable > tbody').html(''); getWeekInfoInYear(startTime, endTime); }); }); function getWeekNumInYear(date) { return dayjs(date).week(); } function getYear(date) { return dayjs(date).year(); } function getWeekInfoInYear(startTime, endTime) { var startTimeObj = dayjs(startTime); var endTimeObj = dayjs(endTime); var weekInfoList = new Array(); for (var year = getYear(startTime); year <= getYear(endTime); year++) { var totalWeek = dayjs(year).isoWeeksInYear(); for (var i = 1; i <= totalWeek; i++) { var pass = true; // 獲取當前星期的星期一和星期天日期 var start = dayjs(year+'01-01').week(i).isoWeekday(1).format('YYYY-MM-DD'); var end = dayjs(year+'01-01').week(i).isoWeekday(7).format('YYYY-MM-DD'); //如果起始時間大於當前區間開始時間，小於區間結束時間，將區間開始時間 = 起始時間 if (startTimeObj.isSameOrAfter(dayjs(start)) && startTimeObj.isSameOrBefore(dayjs(end))) { start = startTimeObj.format('YYYY-MM-DD'); } //如果終止時間大於當前區間開始時間，小於區間結束時間，將區間結束時間 = 終止時間 if (endTimeObj.isSameOrAfter(dayjs(start)) && endTimeObj.isSameOrBefore(dayjs(end))) { end = endTimeObj.format('YYYY-MM-DD'); } //如果當前區間結束時間小於起始時間 或者 當前區間開始時間大於結束時間 則不落入範圍內排除 if (dayjs(end).isBefore(startTime) || dayjs(start).isAfter(endTime)) { pass = false; } if (pass) { var weekMap = { year: year, week: i, start: start, end: end }; weekInfoList.push(weekMap); } } } console.info(weekInfoList); for (var i = 0; i < weekInfoList.length; i++) { var element = $('#gridTable > tbody'); element.append('<tr>'); element.append('<td>' + weekInfoList[i].year + '</td><td>' + weekInfoList[i].week + '</td><td>' + weekInfoList[i].start + '</td><td>' + weekInfoList[i].end + '</td>'); element.append('</tr>'); } } </script> </head> <body> <h1 style="color:red">基於dayjs獲取某一範圍內按周劃分資訊</h1> <div>開始時間<input id="startTime" /></div> <div>結束時間<input id="endTime" /></div> <button id="button">計算</button> <table id="gridTable" border="1"> <thead> <tr> <th>年份</th> <th>星期數</th> <th>開始時間</th> <th>結束時間</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>