具體要求就是：

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

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轉換為js月份表示

for(var?i=1,l=getDaysLen(year,--month)+1;i

var?wd=new?Date(year,month,i).getDay();

cells1[i-1].className="";

if(wd==0||wd==6){cells1[i-1].className="weekEnd";}??//為周末添加特殊樣式

//_oldCls保存當前日期的默認樣式

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]);

}

}

//如果是當前月則選中當日

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).οnclick=function(){changeInfo()}

}

//根據選擇的值進行處理周次和周幾的調整,可以直接傳入保存日期內容的dom元素，或者函數根據點擊位置判斷

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;??//如果不是日期什么都不做

//恢復之前選中日期的樣式

if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}

curSelEl=el;??//保存當前處理的元素

//更新選中日期的樣式

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;??//默認選中當前年份

$("month").selectedIndex=curDate.getMonth();??//當前月份

$("day").value=curDate.getDate();??//當前日期

$("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];??//當前星期幾

$("week").value=calWeek();??//當前第幾周

//改變日期或年份更新日期列表

$("year").οnchange=$("month").οnchange=function(){displayDayList($("year").value,$("month").value,"daysList")};

//顯示當月日期列表,并高亮當天的日期

displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList");

});

//對外設定樣式的接口。

//格式：([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

}

var?dataStr=dateArr.join('|');

styleData.push(dataStr);

dataStyle[dataStr]=style;

return;

}

}

//對外接口

return?{setDateStyle:setDateStyle}

})();

//測試樣式設定

logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test");

new document 第周 星期

年 1 2 3 4 5 6 7 8 9 10 11 12月 日期

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執行]

總結

以上是生活随笔為你收集整理的html日期横向拖动选择控件,一个简单横向javascript日期控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。