每天学一个jquery插件-做日期插件2
做日期插件2
就着昨天的逻辑来的，写起来倒是压力不大，关键是没想好咋将这个玩意和输入框绑起来，先按固定流程记下笔记
效果如下
代码部分
*{
margin: 0px;
padding: 0px;
user-select: none;
}
.rel{
width: 210px;
height: 240px;
position: relative;
}
.item{
font-size: 12px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
float:left;
color: black;
cursor: pointer;
}
.item:hover{
opacity: 0.9;
background-color: gray;
color: white;
}
.item.head{
background-color: gray;
color: white;
}
.item.prev,.item.next{
color: lightgray;
}
.item.check{
background-color: #2ecc71!important;
color: white!important;
}
.item.tool{
font-weight: bold;
position: absolute;
bottom: 0;
}
.left{
left: 30px;
}
.val{
left: 60px;
}
.right{
left: 150px;
}
.rright{
left: 180px;
}
.val{
width: 90px;
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做日期插件</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zrqcj.js"></script>
<link href="css/zrqcj.css" type="text/css" rel="stylesheet" />
<style>
#div{
border: 1px solid lightgray;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
var temp = zrqcj("div");
temp.load(Date.now());//这个是按照当前时间渲染日期
</script>
var zrqcj = function(id){
var $id= $("#"+id);
$id.addClass("rel");
var $head = $("<div class='item head'>周末</div><div class='item head'>周一</div><div class='item head'>周二</div><div class='item head'>周三</div><div class='item head'>周四</div><div class='item head'>周五</div><div class='item head'>周六</div>")
$head.appendTo($id);
var $lleft =$("<div class='item tool lleft'><<</div>");
var $left =$("<div class='item tool t2 left'><</div>");
var $val = $("<div class='item tool val'>1</div>");
var $right =$("<div class='item tool right'>></div>");
var $rright =$("<div class='item tool rright'>>></div>");
$lleft.appendTo($id);
$left.appendTo($id);
$val.appendTo($id);
$rright.appendTo($id);
$right.appendTo($id);
//首先知道当前时间
return{
$id:$id,
year:0,
month:0,
day:0,
$lleft:$lleft,
$left:$left,
$val:$val,
$right:$right,
$rright:$rright,
load:function(date){
var that = this;
that.draw(date);
//按钮点击事件
that.$lleft.click(function(){
var str = (parseInt(that.year)-1)+"-"+that.month+"-1";
that.draw(str);
})
that.$rright.click(function(){
var str = (parseInt(that.year)+1)+"-"+that.month+"-1";
that.draw(str);
})
that.$left.click(function(){
var year = that.year;
var month = that.month-1;
year=month<=0?year-=1:year;
month = month<=0?12:month;
var str = year+"-"+month+"-1";
that.draw(str);
})
that.$right.click(function(){
var year = that.year;
var month = that.month+1;
year=month>=13?year+=1:year;
month = month>=13?1:month;
var str = year+"-"+month+"-1";
that.draw(str);
})
},
draw:function(date){
//给指定时间渲染对应的dom
var that =this;
that.$id.find(".item:not(.head,.tool)").remove();//除了头部全部删除重新渲染
var t =new Date(date);//时间对象
var tt = t.getTime();//时间戳
var week = t.getDay();//周
var month = t.getMonth()+1;
var day = t.getDate();
//同步当前时间到缓存之中
that.year = t.getFullYear();
that.month = month;
that.day = day;
//首先算出第一天的时间戳
var tt0 = tt-1000*60*60*24*(day-1);
var t0 = new Date(tt0);
var week0 = t0.getDay();
var day0 = t0.getDate();
var month0 = t0.getMonth();
//然后分割出年月日，知道是周几，然后逐个往前往后填满预计的天
//假如不是周末，那么就往前部上几天补到周末
var index= 0;
var tt1 = tt0;
//渲染前面的
while(week0>0){
tt1-=1000*60*60*24
var t1= new Date(tt1);
var day1 = t1.getDate();
var year1 = t1.getFullYear();
var month1 = t1.getMonth();
var str = year1+"-"+(month1+1)+"-"+day1;
var $item = $("<div class='item prev' data-date='"+str+"'>"+day1+"</div>");
$item.appendTo(that.$id);
week0--;
index++;
}
var tt2 = tt0;
var t2 = new Date(tt0);
var month2 = t2.getMonth();
var day2 = t2.getDate();
var year2 = t2.getFullYear();
//渲染这个月的
while(month2==month0){
var str = year2+"-"+(month2+1)+"-"+day2;
var $item = $("<div class='item' data-date='"+str+"'>"+day2+"</div>");
$item.appendTo(that.$id);
if(day2==that.day){
$item.addClass("check")
}
tt2+=1000*60*60*24;
t2 = new Date(tt2);
month2 = t2.getMonth();
day2 = t2.getDate();
year2 = t2.getFullYear();
index++;
}
//渲染下个月的
while(index<42){
var str = year2+"-"+(month2+1)+"-"+day2;
var $item = $("<div class='item next' data-date='"+str+"'>"+day2+"</div>");
$item.appendTo(that.$id);
tt2+=1000*60*60*24;
t2 = new Date(tt2);
month2 = t2.getMonth();
day2 = t2.getDate();
year2 = t2.getFullYear();
index++;
}
//渲染工具val的值
that.$val.text(that.year+"-"+that.month);
//这个点击选中事件每次渲染的时候就重新绑定一次算了，我懒得写委托了，关键是这里面我拎不清
//此外假如这是个有用的控件的话，这个地方就该将数据写到对应的输入框了
that.$id.find(".item:not(.head,.tool)").click(function(){
var str = $(this).attr("data-date");
that.draw(str);
})
}
}
}
思路解释
- 还是昨天一样的思路，昨天旨在按照固定格式渲染出一个日期界面，这个格式就是一个日期对象的字符串就成比如yy-mm-dd这个格式，后面的时间部分有没有没差
- 然后就是今天的部分，把底下的工具部分放了进来，同时在渲染日的时候，把对应的格子记录上他自己的对应的日期值
- 接着就是完善动作，有了前面的步骤，像什么左右工具跳动年份和月份直接做，最后拼接字符串重新渲染一次就行了，对了，我把渲染部分单独弄成一个方法了
- 然后选中日期的跳转动作，因为标签已经保存了这个格子的日期对象，所以我将它取出来直接渲染一次就行了
- 所以这个动作做起来不难，就是前面的渲染得考虑一下怎么和后面的工具动作互相成就
- 实现的具体思路都在js部分的注释里面了，这里就不多说了，关键还是要知道啥是时间戳。
- 最后还差一点点了，就是把这玩意变成与input框绑定起来，在选中日期之后将日期填进去，交给明天了，碎觉~