Learn a jquery plug-in every day-do date plug-in 2
Do date plugin 2
Based on the logic of yesterday, it is not too stressful to write, the key is to tie this thing to the input box without thinking about it. First, take notes according to a fixed process.
The effect is as follows
Code part
*{
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);
})
}
}
}
Idea explanation
- The same idea as yesterday. Yesterday aims to render a date interface in a fixed format. This format is a string of date objects, such as yy-mm-dd. Is there any difference in the time part behind?
- Then it’s today’s part, put in the tool part below, and at the same time when rendering the day, record his own corresponding date value on the corresponding grid
- The next step is to perfect the action. With the previous steps, like the left and right tools, you can do it directly by jumping the year and month. Finally, you can re-render the string together. By the way, I made the rendering part into a separate method.
- Then select the jump action of the date, because the label has saved the date object of this grid, so I take it out and render it directly once.
- So this action is not difficult to do, that is, the previous rendering has to consider how to achieve each other with the subsequent tool actions
- The specific ideas for implementation are in the comments in the js part, so I won't say more here, the key is to know what a timestamp is.
- In the end, it was a little bit close, that is, to bind this thing to the input box, fill in the date after the date is selected, and give it to tomorrow, broken feeling~