一個簡單橫向javascript日期控件
2024-05-06 14:18:40
供稿：網友
具體要求就是：
1、日期表格橫向占滿頁面。
2、每個月的日期列表橫向顯示在一排，而不是像網上的很多日期控件顯示一個方塊。
3、要求只有年月日可選，選擇年或月后自動更新對應日期（這個每個日期控件都有的）。
4、默認顯示當前年月，高亮當前日期，并顯示當前的周次（本年第幾周）和星期幾。
5、選擇某個日期后高亮顯示當前日期，并自動更新周次和星期顯示。
6、提供接口，可以設定特定日期的顯示樣式。
6、其他就是一些界面展示的問題了。
想著就是一個日期控件，做著也比較簡單，不過比較特別是橫向的，第一次聽說這種需求的！
偶還是第一次寫日歷類的東西，不過這次的麻煩還是在于周次的計算上和最后提供的設定特定日期的接口實現上，但經過一番分析也很好的解決了。
主要幾個總結：
1、使用了閉包，隱藏內部函數及變量，防止變量污染。最后只提供一個對外接口：setDateStyle
2、計算每年二月的天數不是通過判斷閏年的辦法，而是通過判斷是否2月29日存在，如果不存在則為28天。
3、計算周次要先計算當前日期是本年的第幾天，同時要考慮本年1月1日是星期幾，然后計算即可得出。
4、setDateStyle支持單個日期樣式的傳入，也支持多個日期樣式的設定。對于樣式的更新主要采用數組合并字符竄，并采用字符串的indexOf方法匹配并執行樣式的設定。
5、CSS/JS/HTML相分離，便于維護。函數模塊化便于重用。
代碼如下:
var logDateControl=(function(){
var curSelEl; //當前選中的日期
var styleData=[],dataStyle={};
//獲取指定id的元素
var $=function(id){return document.getElementById(id)}
//計算指定日期是第幾周（默認為當前日期），該計算方法比較嚴密準確
var calWeek=function(dt){
var calDay=dt||new Date(); //當前要計算的時間
var firstDay=new Date(calDay.getFullYear(),0,1); //本年第一天
//計算當前是本年的第幾天,00：00為當天開始
var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;
//本年第一天星期幾
var firstDayWeekday=firstDay.getDay();
//該結果加到第一周的周一，便于后面計算
var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;
daysAll=daysAll+diffDay;
return Math.ceil(daysAll/7); //返回計算結果
}
//計算一個月多少天,年份4位數字，月份1-2位數字（應該是js日期格式如1月傳入0）,數據非法返回-1
