|
|
1、日期表格橫向占滿頁面。
2、每個月的日期列表橫向顯示在一排，而不是像網(wǎng)上的很多日期控件顯示一個方塊。
3、要求只有年月日可選，選擇年或月后自動更新對應(yīng)日期（這個每個日期控件都有的）。
4、默認(rèn)顯示當(dāng)前年月，高亮當(dāng)前日期，并顯示當(dāng)前的周次（本年第幾周）和星期幾。
5、選擇某個日期后高亮顯示當(dāng)前日期，并自動更新周次和星期顯示。
6、提供接口，可以設(shè)定特定日期的顯示樣式。
6、其他就是一些界面展示的問題了。
想著就是一個日期控件，做著也比較簡單，不過比較特別是橫向的，第一次聽說這種需求的！
偶還是第一次寫日歷類的東西，不過這次的麻煩還是在于周次的計算上和最后提供的設(shè)定特定日期的接口實現(xiàn)上，但經(jīng)過一番分析也很好的解決了。
主要幾個總結(jié)：
1、使用了閉包，隱藏內(nèi)部函數(shù)及變量，防止變量污染。最后只提供一個對外接口：setDateStyle
2、計算每年二月的天數(shù)不是通過判斷閏年的辦法，而是通過判斷是否2月29日存在，如果不存在則為28天。
3、計算周次要先計算當(dāng)前日期是本年的第幾天，同時要考慮本年1月1日是星期幾，然后計算即可得出。
4、setDateStyle支持單個日期樣式的傳入，也支持多個日期樣式的設(shè)定。對于樣式的更新主要采用數(shù)組合并字符竄，并采用字符串的indexOf方法匹配并執(zhí)行樣式的設(shè)定。
5、CSS/JS/HTML相分離，便于維護。函數(shù)模塊化便于重用。
復(fù)制代碼 代碼如下:
var logDateControl=(function(){
var curSelEl; //當(dāng)前選中的日期
var styleData=[],dataStyle={};
//獲取指定id的元素
var $=function(id){return document.getElementById(id)}
//計算指定日期是第幾周（默認(rèn)為當(dāng)前日期），該計算方法比較嚴(yán)密準(zhǔn)確
var calWeek=function(dt){
var calDay=dt||new Date(); //當(dāng)前要計算的時間
var firstDay=new Date(calDay.getFullYear(),0,1); //本年第一天
//計算當(dāng)前是本年的第幾天,00：00為當(dāng)天開始
var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;
//本年第一天星期幾
var firstDayWeekday=firstDay.getDay();
//該結(jié)果加到第一周的周一，便于后面計算
var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;
daysAll=daysAll+diffDay;
return Math.ceil(daysAll/7); //返回計算結(jié)果
}
//計算一個月多少天,年份4位數(shù)字，月份1-2位數(shù)字（應(yīng)該是js日期格式如1月傳入0）,數(shù)據(jù)非法返回-1
var getDaysLen=function(year,month){
if(!(/^/d{4}$/.test(year)&&/^/d{1,2}$/.test(month))){return -1}
var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31]
//存在2月29日
if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29}
return monthDays[month]
}
//顯示日期列表,傳入年、月(按日常月份傳入。如二月傳入2)、及顯示位置
var displayDayList=function(year,month,pos){
var daysList=[];
var cells1=$(pos).rows[0].cells;
var cells2=$(pos).rows[1].cells;
var daysArr=['日','一','二','三','四','五','六'];
//下面的month-1轉(zhuǎn)換為js月份表示
for(var i=1,l=getDaysLen(year,--month)+1;i<l;i++){
var wd=new Date(year,month,i).getDay();
cells1[i-1].className="";
if(wd==0||wd==6){cells1[i-1].className="weekEnd";} //為周末添加特殊樣式
//_oldCls保存當(dāng)前日期的默認(rèn)樣式
cells1[i-1].innerText=daysArr[wd];
cells2[i-1].className="unSelectDay";
cells2[i-1].setAttribute("_oldCls","unSelectDay");
cells2[i-1].innerText=i>9?i:"0"+i;
//匹配用戶自定義樣式
var dtStr=year+"|"+(month+1)+"|"+i;
if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){
cells2[i-1].className="unSelectDay "+dataStyle[dtStr];
cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]);
}
}
//如果是當(dāng)前月則選中當(dāng)日
if(new Date().getMonth()==month){
curSelEl=cells2[new Date().getDate()-1];
curSelEl.className="selectDay";
}
for(var j=i-1;j<31;j++){
cells1[j].className=cells2[j].className="";
cells1[j].innerHTML=cells2[j].innerHTML=" ";
}
$(pos).onclick=function(){changeInfo()}
}
//根據(jù)選擇的值進行處理周次和周幾的調(diào)整,可以直接傳入保存日期內(nèi)容的dom元素，或者函數(shù)根據(jù)點擊位置判斷
var changeInfo=function(e){
e=e||event;
var el=e.target||e.srcElement||e; //最后一個e：可能是傳入的對象
var day=el.innerText;
if(!/^/d{1,2}$/.test(day)) return; //如果不是日期什么都不做
//恢復(fù)之前選中日期的樣式
if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}
curSelEl=el; //保存當(dāng)前處理的元素
//更新選中日期的樣式
el.className="selectDay";
var dt=new Date($("year").value,$("month").value-1,day);
//更新信息
$("day").value=day; //日期
$("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()]; //星期幾
$("week").value=calWeek(dt); //第幾周
}
//初始化
window.attachEvent("onload",function(){
var curDate=new Date(),curYear=curDate.getFullYear();
//顯示上下十年
for(var i=-10;i<10;i++){$("year").add(new Option(curYear+i,curYear+i))}
$("year").selectedIndex=10; //默認(rèn)選中當(dāng)前年份
$("month").selectedIndex=curDate.getMonth(); //當(dāng)前月份
$("day").value=curDate.getDate(); //當(dāng)前日期
$("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()]; //當(dāng)前星期幾
$("week").value=calWeek(); //當(dāng)前第幾周
//改變?nèi)掌诨蚰攴莞氯掌诹斜?
$("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")};
//顯示當(dāng)月日期列表,并高亮當(dāng)天的日期
displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList");
});
//對外設(shè)定樣式的接口。
//格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f")
//如果月份小于10不要帶0
var setDateStyle=function(dateArr,style){
if(typeof dateArr!="object")return;
if(dateArr instanceof Array){
if(dateArr[0] instanceof Array){
for(var i=0;i<dateArr.length;i++) setDateStyle(dateArr[i],style);
}
var dataStr=dateArr.join('|');
styleData.push(dataStr);
dataStyle[dataStr]=style;
return;
}
}
//對外接口
return {setDateStyle:setDateStyle}
})();
//測試樣式設(shè)定
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test");
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：一個簡單橫向javascript日期控件，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
