原生JS日歷 + JS格式化時間格式

公司項目中用到，以前沒做過，廢了好幾個小時 終於做好了 先來效果圖（暫時沒寫樣式 湊合着看吧）

點擊左右按鈕都能改變月份 下方表格中的數據也會跟着變化

貼上代碼 :

　　　　html部分：

<div style="position:absolute;top:0px;left:220px;right:0px;height:250px;" >
                <!--上面顯示的年份月份  -->
                <div style="position:absolute;top:0px;left:0px;right:0px;height:30px;" >
                    <span style="position:absolute;top:6px;left:40px;width:100px;height:24px;">
                        <img src="${ctx}/upload/img/left.png" alt="上個月" onclick="clickLeft()" class="showImg" width="21" />
                    </span>
                    <span style="position:absolute;top:0px;left:43%;width:150px;height:30px;font-size: 24px;" id="thisYears"></span>
                    <span style="position:absolute;top:6px;right:40px;width:10px;height:24px;">
                        <img src="${ctx}/upload/img/right.png" alt="下個月"  onclick="clickRight()" class="showImg" width="21"/>
                    </span>
                </div>
                <!--table部分  -->
                <div style="position:absolute;top:30px;left:0px;right:0px;height:220px;">
                    <table style="width: 100% ;height: 100%;text-align:center;" border="1px"  cellspacing="0" cellpadding="0" >
                        <thead style=" font-size: 24px;">
                            <tr>
                                <td>
                                    <div>星期日</div>
                                </td>
                                <td>
                                    <div>星期一</div>
                                </td>
                                <td>
                                    <div>星期二</div>
                                </td>
                                <td>
                                    <div>星期三</div>
                                </td>
                                <td>
                                    <div>星期四</div>
                                </td>
                                <td>
                                    <div>星期五</div>
                                </td>
                                <td>
                                    <div>星期六</div>
                                </td>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div>
            </div>

 

JS部分

        <script type="text/javascript">
        var currentYear = 0;//當前顯示的年
        var currentMonth = 0;//當前顯示的月
        //日歷填充方法
        function calendar (){
            var date = new Date();
            layTable(date);
            currentYear =thisYear(date);
            currentMonth =thisMonth(date);
            $('#thisYears').html(currentYear+"年"+currentMonth+"月");
        }
        
        //鋪表格 
        function layTable(date){
            var startDays = thisDays(date);//1號星期幾
            var count = getDays(thisYear(date),thisMonth(date));//獲取這個月有多少天
            var tr_str= Math.ceil((count + startDays)/7); //取上限 打印多少行
            var td_str = "";
            var index =0;
            var istop = true;//鋪表格的時候要判斷是否是第一行
            for(var i=0;i<tr_str;i++){ //循環多少行
                td_str +="<tr class='datetr'>";
                for(var j=1;j<=7;j++){
                    if(startDays>0 && istop==true){//如果這個月第一天不是星期天，那么就對應的打印多少個空<td></td>
                        istop = false;
                        for(var l=0;l<startDays;l++){
                            td_str +="<td></td>";
                        }
                        j=startDays; //因為內循環已經鋪了幾個空位了，外面的循環就要少鋪設對應的條數
                    }else{
                        index++;
                        if(index<=count){//如果超過了這個月的天數，就再次給賦空值
                            td_str +="<td><div onclick='clickdate("+thisYear(date)+","+thisMonth(date)+","+index+")'>"+index+"</div></td>";
                        }else{
                            td_str +="<td></td>";
                        }
                    }
                }
                td_str +="</tr>";
                $('#tbody').append(td_str);
                td_str = "";
            } 
        }
        
        
        //獲取年份
        function thisYear(date){
            return date.getFullYear();
        }
        //獲取月份
        function thisMonth(date){
            return date.getMonth()+1;
        }
        //獲取該月份的第一天是星期幾 0是星期天 1 2 3 4 5 6 
        function thisDays(date){
             date.setDate(1);
            var week = date.getDay();
             return week;
        }
        
        // 獲取當月一共有多少天
        function getDays(year,mouth){
            //定義當月的天數；
            var days ;
            //當月份為二月時，根據閏年還是非閏年判斷天數
            if(mouth == 2){
               days= year % 4 == 0 ? 29 : 28;
            }
            //月份為：1,3,5,7,8,10,12 時，為大月.則天數為31；
            else if(mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12){
                days= 31;
            }
            //其他月份，天數為：30.
            else{
                days= 30;
            }
           return days;
        }
        
        //點擊左箭頭
        function clickLeft(){
            if(currentMonth-1 != 0){
                currentMonth = currentMonth-1;
                var date = new Date(currentYear,currentMonth-1);
            }else{
                currentYear = currentYear-1;
                currentMonth = 12;
                var date =     new Date(currentYear,currentMonth-1);
            }
            $('#thisYears').html(currentYear+"年"+currentMonth+"月");
            clearTable();
            layTable(date);
        }
        //點擊右箭頭
        function clickRight(){
            if(currentMonth+1 < 13){
                currentMonth = currentMonth+1;
                var date = new Date(currentYear,currentMonth-1);
            }else{
                currentYear = currentYear+1;
                currentMonth = 1;
                var date =     new Date(currentYear,currentMonth-1);
            }
            $('#thisYears').html(currentYear+"年"+currentMonth+"月");
            clearTable();
            layTable(date);
        }
        //清空表格中的數
        function clearTable(){
            $("#tbody").html("");
        }
        
        //當點擊時間時
        function clickdate(year,month,day){//獲取年月日
            alert(year+"年"+month+"月"+day+"日");
        }
        
        </script>

 JS格式化時間：

　　格式化前：Wed Oct 18 2017 00:00:00 GMT+0800 (中國標准時間)

　　格式化后：2017-10-18

　代碼：

//格式化時間
            function  formatDate (date) {  
                var y = date.getFullYear();  
                var m = date.getMonth() + 1;  
                m = m < 10 ? '0' + m : m;  
                var d = date.getDate();  
                d = d < 10 ? ('0' + d) : d;  
                return y + '-' + m + '-' + d;  
            };