日期控件

一、一些關於javascript日期的知識

1.創建Date對象

在腳本用new關鍵字實例化一個Date對象，獲得當前的時間（中國標準時間），在控制檯輸出查看結果

var now=new Date();
console.log(now);

2.關於時間的一些方法

1）獲取當前年份

getYear()，取得的值是實際年份減去1900
getFullYear()，獲取當前完整年份

var now=new Date();
var year=now.getYear();
var fullYear=now.getFullYear();
console.log(year,fullYear);

2)獲取月日天

getMonth() ，這個函數返回值的範圍是0-11，所以當前年份等於返回值+1；
getDate() 獲取當前的日期，返回值1-31
getDay() 當前是星期幾,返回值爲0-6
所以下面定義一個weekDay數組，從星期天開始

var now=new Date();
var month=now.getMonth()+1;
var date=now.getDate();
var day=now.getDay();
var weekDay=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log('今天是'+month+'月'+date+'號'+weekDay[day]);

3）獲取時分秒

getHours()，當前是幾點
getMinutes()，當前是幾分
getSeconds()，當前是幾秒
getMilliseconds(),當前毫秒

var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
console.log('現在是'+hours+'點'+minutes+'分'+seconds+'秒');

4）獲取時間戳

時間戳是指格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)起至現在的總秒數。

getTime()當前時間戳（距1970年1月1號的毫秒數）
new Date(時間戳)返回當前的時間（中國標準時間）

var now=new Date();
var time=now.getTime();
var today=new Date(time);
console.log('時間戳爲'+time);
console.log(now,today);

5)時間格式轉化

toLocalString() 函數 – 返回本地時間
toLocaleDateString函數 – 返回本地時間日期部分
toLocaleTimeString函數 – 返回本地時間時間部分

6）時間解析

Date.parse()解析一個日期的字符串，返回時間戳

二、實現日期控件

1.預計效果：選擇一個日期，顯示一個7列表格，分別對應選中日期的星期一到星期天待辦事項。

2.整體思路：選中日期後，想辦法得到選中日期的星期一的時間戳。表格中的日期是以星期一爲參考的

3.效果圖：

Css代碼：

 <style type="text/css">
            td,th{width:200px;height:30px;}
            td{height:80px;}
            #content{width:1200px;height: 800px;margin:0 auto;}
            .color{background:purple;color:white;}
            #date{width:150px;height:30px;font-size: 20px;margin-bottom:10px}
    </style>

HTML代碼：

<div id='content'>
         <input type="date" id='date'>
         <table border="1px solid red" style='display:none'>
             <tr>
                 <th id='one' ></th>
                 <th id='two'></th>
                 <th id='three'></th>
                 <th id="four"></th>
                 <th id='five'></th>
                 <th id='six'></th>
                 <th id='seven'></th>
             </tr>
              <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
              <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
              <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
         </table>
</div>
</body>

Script代碼：

<script type="text/javascript" src='../JQUERY/js/jquery-2.2.1.js'></script>
<script type="text/javascript">
       $("#date").change(function(){
          var selectedate=$("#date").val();             //獲得選中的日期
          var standradTime =new Date(Date.parse(selectedate));  //把選中日期轉換成標準時間
          var timeSeconds=standradTime.getTime();  //獲取時間戳
          var day=standradTime.getDay();               //選中的爲星期幾
          var mondayTimeSecond=timeSeconds-(day-1)*24*60*60*1000; //星期一的時間戳
          var currenIndex=day-1;

           var formateMonday=FormateDate(1);
           var formateTuesday=FormateDate(2);
           var formateWednesday=FormateDate(3);
           var fomateThursday=FormateDate(4);
           var formateFirday=FormateDate(5);
           var formateSaturday=FormateDate(6);
           var formateSunday=FormateDate(7);    

                    function FormateDate(a){
                            TimeSeconds=mondayTimeSecond+24*60*60*1000*(a-1);
                            var vdate=new Date(TimeSeconds);
                            var year=vdate.getFullYear();
                            var month=vdate.getMonth()+1;
                            var date=vdate.getDate();
                            var dayArray=['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
                            var day=dayArray[a-1];
                         return year+'-'+month+'-'+date+' '+day;

                    }

            $("#one").text(formateMonday);
            $("#two").text(formateTuesday);
            $("#three").text(formateWednesday);
             $("#four").text(fomateThursday);
            $("#five").text(formateFirday);
            $("#six").text(formateSaturday);
            $("#seven").text(formateSunday);
            $("table").css("display",'block');
            $("th:eq("+ currenIndex+")").addClass('color');
            $("th:not(th:eq("+ currenIndex+")"+")").removeClass('color');  
        })
</script>

4.分析

1）頁面就一個input標籤和一個table，類型爲date。簡單設置一下樣式,table的默認是隱藏的（display:none）
2)change()是一個函數表示當日期發生變化時，要進行的操作
3）首先把選中時間轉化成標準時間，這樣後面就可以方便地調用getMonth（）等方法。再用getTime()得到選中日期時間戳，選中日期和星期一差了(day-1)*24*60*60*1000

  var standradTime =new Date(Date.parse(selectedate));
  var timeSeconds=standradTime.getTime();
   var mondayTimeSecond=timeSeconds-(day-1)*24*60*60*1000; //星期一的時間戳

4）FormateDate()
定義一個FormateDate()函數，返回選中日期的星期一到星期天的日期和星期幾。跟前面一樣先要獲得時間戳，再用new Date()把時間戳轉化成標準時間好調用時間的方法。這裏的時間戳都是相當於星期一的時間戳
5）jquery選擇器
用$(selector).text()把得到的值分別傳給對應單元格的,並且設置表格的屬性爲可見的。當前選中日期高亮顯示，未選中則正常顯示。

 $("th:eq("+ currenIndex+")").addClass('color');
            $("th:not(th:eq("+ currenIndex+")"+")").removeClass('color');  

如有誤之處歡迎指正，謝謝！！！