html日期横向拖动选择控件,一个简单横向javascript日期控件
具体要求就是:
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日期控件相关推荐
- Qt 封装一个简单的LED(指示灯)控件
Qt 封装一个简单的LED(指示灯)控件 1,效果~ 所以 这个简单的LED类可以自定义大小~ 可以点亮或熄灭,也可以闪烁
- 一个简单的javascript节流器实现
节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台 ...
- ant vue 树形菜单横向显示_快速实现一个简单可复用可扩展的Vue树组件
来源 | https://wintc.top/article/13大概因为平时工作项目的原因,写了很多次树形组件,越写越觉得可以写得更简单并且更具有复用性.扩展性.树组件的应用场景很多,比如一篇文章的 ...
- 虚拟服务器能挂跟单系统,格物策略:跟单控是一个简单、高效的科技跟单系统...
技术是为了市场服务的,社会的层次越高,就越会往专业化发展,也就会越依赖于技术的进步.互联网金融的快速发展,众多群体都热衷于基于互联网技术的交易软件.而交易软件只是一种工具,就意味着如果你不专业,用什么 ...
- android 横向拖动选取,Android HorizontalRefresh 一个可以左右拖动刷新的控件
欢迎Follow我的GitHub, 关注我的CSDN. 其余参考Android目录. 欢迎关注我们的微信公众号:杨守乐 转载来源:杨守乐 本文由:[吧主的博客]分享 每日英语 life is craz ...
- winform html编辑器控件,一个WinForm富文本编辑器控件
WinForm 上的富文本编辑器简直不要太少,虽然有 RichEdit,但是这个鬼极难用而且复杂,在插入图片和表格的时候简直抓狂,还要理解复杂的 RTF 格式. 我希望有一个文本控件,包括基本的格式设 ...
- android 自定义listview控件,一个简单又完整的自定义ListView
ListView 一.简单列表 1.在activity_main中添加控件ListView xmlns:tools="http://schemas.android.com/tools&quo ...
- silverlight创建新的控件——一个简单的弹出菜单
照旧,直接贴代码 <UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
- 基于Winform的Chart控件的简单使用(Chart控件中的条形统计图、折线统计图、扇形统计图的简单使用)
Chart控件集成了颇多的统计图模型,拿来即用的理念大大节省了开发的时间.下面演示最常见的三种统计图模型的使用. 效果展示: C#代码: using System; using System.Coll ...
最新文章
- 《NodeJS开发指南》第五章微博实例开发总结
- Docker 阿里云镜像加速
- Lingo优化模型概述
- w550官方例程_急!求索爱w550的刷机所需要的所有文件! 全部分送上!
- python的使用说明_Python 的基本使用说明
- SQL SERVER全局变量
- filetype 在搜索引擎中的使用方法(2)
- WordPress 5.0禁用古滕堡编辑器的方法
- xcode 制作静态库.a文件 详解
- 时间序列分析思维导图
- 2020 小米刷机相关总结
- 国人创造中文编程语言的优势
- 分享一款手机最强Python编程神器,用手机运行Python。天秀!
- 行业顶级NoSQL成员坐阵,NoSQL数据库专场重点解析!
- python 密码输入显示星号_[145]python实现控制台密码星号输入
- 门店超越星巴克背后,瑞幸成咖啡市场新航标
- 狄拉克函数- dirac 分布
- python怎么实现打开摄像头_python开启摄像头以及深度学习实现目标检测方法
- CMDN Club每周精选(第4期)
- HTML5初学——列表标签(09-12课)和表单标签(13-30课)、查阅文档