根據年份選擇周數-js

選擇周數的css用的是bootstrap，百度后最終整理如下：

效果：

 

 

 

HTML代碼如下：

                <div class="btn-group">
                    <button type="button" class="my my1 btn btn-primary dropdown-toggle ft18" data-toggle="dropdown" style="width: 120px;">
                        <span></span>&nbsp;&nbsp;
                        <span class="yearText priceData">選擇年份</span>&nbsp;&nbsp;
                    </button>
                    <ul class="my line20 dropdown-menu ft16" role="menu" id="priceDataYear">
                    </ul>
                </div>
                <div class="btn-group">
                <button type="button" class="my my1 btn btn-primary dropdown-toggle ft18" data-toggle="dropdown" style="width: 250px;">
                <span></span>&nbsp;&nbsp;
                <span class="weekText priceData">選擇周數</span>&nbsp;&nbsp;
                <span class="caret"></span>
                </button>
                    <ul class="my line20 dropdown-menu ft16" role="menu" id="priceDataWeek">
                    </ul>
                </div>
               </div>

js代碼如下：

<script type="text/javascript">
    $(function(){
        showYear();
    });
//    顯示近5年
    function showYear() {
    var nowDate = new Date();
    //設置近5年的年份
    var nowYear = nowDate.getFullYear();
    var yearHtml = '<li><a href="javaScript:void(0)" onclick="year($(this).text())">選擇年份</a></li>';
    for (var i = 0; i < 5; i++) {
        yearHtml += '<li><a href="javaScript:void(0)" onclick="year($(this).text())">' + (nowYear - i) + '年</a></li>';
    }
    $('#priceDataYear').html(yearHtml);
    }
    
    function year(text) {
        $('.yearText.priceData').text(text);
        $('.weekText').text('選擇周數');
        var weekHtml = '';
        if(text != '選擇年份') {
            var year = parseInt(text.substring(0, text.length - 1));
            //計算出這年的周數
            var weekNum = getNumOfWeeks(year);
            //首先算出這年的第一個星期日
            var firstSunday = new Date(year, 0, 1);
            var n = 6 - (firstSunday.getDay() + 6) % 7;
            firstSunday.setDate(firstSunday.getDate() + n);
            //根據年份設置周數
            weekHtml += '<li><a href="javaScript:void(0)" onclick="week($(this).text())">選擇周數</a></li>';
            for(var i = 1; i <= weekNum; i++) {
                if(i == 1) {
                    //計算這年第一個周一的日期
                    var firstMonday = new Date(firstSunday.setDate(firstSunday.getDate() - 6));
                    firstSunday.setDate(firstSunday.getDate() + 6);
                    weekHtml += '<li><a href="javaScript:void(0)" onclick="week($(this).text())">第' + i + '周（' + getNowFormatDate(firstMonday) + '）-（' + getNowFormatDate(firstSunday) + '）</a></li>';
                } else {
                    weekHtml += '<li><a href="javaScript:void(0)" onclick="week($(this).text())">第' + i + '周' + getDateRange(firstSunday) + '</a></li>';
                    //計算出下一個星期日，有個問題是上面調用getDateRange()已經firstSunday加了7天，這里就不需要重新firstSunday加7天
                    // firstSunday.setDate(firstSunday.getDate() + 7);
                }
            }
        }
        $('#priceDataWeek').html(weekHtml);
    }
    function week(wk){
        $('.weekText.priceData').text(wk);
    }
    function getNumOfWeeks(year) {
    //設置為這一年開始日期
    var startDateOfYear = new Date(year, 0, 1);
    //計算這一年有多少天
    var daysOfYear = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 366 : 365;
    //366（365）/7=52.2(52.1)，所以一般一年有52周余1天或者2天，當這一年有366天時且第一天是周日，那么他的最后一天則是周一，這一年就有54周。
    var weekNum = 53;
    //當年份是閏年且第一天是周日時有54周
    if (startDateOfYear.getDay() == 0 && daysOfYear == 366) {
        weekNum = 54;
    }
    return weekNum;
    }
        /**
     * 根據上周日獲取這周日的日期范圍
     * @param lastSunday
     * @returns
     */
    function getDateRange(lastSunday) {
        if (lastSunday == null || lastSunday == '') {
            return "";
        }
        var beginDate = new Date(lastSunday.setDate(lastSunday.getDate() + 1));
        var endDate = new Date(lastSunday.setDate(lastSunday.getDate() + 6));
        return '（' + getNowFormatDate(beginDate) + '）-' + '（' + getNowFormatDate(endDate) + '）';
    }
    
    /**
     * 時間轉換成字符串
     * @param date
     * @returns
     */
    function getNowFormatDate(date) {
        var Month = 0;
        var Day = 0;
        var CurrentStr = "";
        // 初始化時間
        Month = date.getMonth() + 1;
        Day = date.getDate();
        if (Month >= 10) {
            CurrentStr += Month + "月";
        } else {
            CurrentStr += "0" + Month + "月";
        }
        if (Day >= 10) {
            CurrentStr += Day + "日";
        } else {
            CurrentStr += "0" + Day + "日";
        }
        return CurrentStr;
    }
</script>