一个简单横向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
