利用JS實現(xiàn)簡單的日期選擇插件
更新時間：2017年01月23日 09:22:17 投稿：daisy
這篇文章主要介紹了利用JS實現(xiàn)簡單的日期選擇插件，文中實現(xiàn)兩種效果的日期選擇，一種是默認(rèn)參數(shù)，點擊日期后直接選擇該日期，另一種是顯示按鈕來設(shè)置時間，有需要的朋友可以參考借鑒，下面來一起看看吧。
首先是調(diào)用方法如下
//調(diào)用方法，后面回調(diào)函數(shù)返回的是當(dāng)前選擇的日期
calender('#calend').init(function(date){
this.innerHTML = date
});
//具體參數(shù)說明
//如果需要傳入?yún)?shù)，第一個為json，第二個為回調(diào)函數(shù)
//下面是format格式化顯示格式類型，有如下幾種：
//yyyy為年數(shù)
//大寫M為月數(shù)
//d為幾號
//h為小時
//小寫m為分鐘
//s為秒數(shù)
//q為季度
//小寫e，為數(shù)字星期格式
//大寫E，為中文星期格式
//舉例：'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E'
//注意：以上獲取時間如果是個位數(shù)則返回個位數(shù)，比如7月，則返回7，如果需要返回07，參數(shù)可以寫成這樣“MM”，其它同理，由于時分秒功能還沒有添加，默認(rèn)獲取當(dāng)前時分秒
calender('#calend').init({
date : [2015,12,12], //設(shè)置默認(rèn)顯示年月日，默認(rèn)當(dāng)前年月日
format : 'yyyy-MM-dd', //設(shè)置顯示格式
button : false //是否顯示按鈕
left : 0, //追加left，默認(rèn)0
top :0, //追加top，默認(rèn)0
onload : function(){ } //初始化完成執(zhí)行，this為當(dāng)前創(chuàng)建的日歷對象
},function(date){
//回調(diào)函數(shù)
this.innerHTML = date
});
主要css樣式
.containter {
width:320px;
margin:auto
}
.calender-wrap {
-webkit-animation:clafade .3s ease;
-moz-animation:clafade .3s ease;
animation:clafade .3s ease;
padding:5px;
background:#fff;
width:240px;
box-shadow:0 5px 10px rgba(0,0,0,0.2);
border-radius:4px;
position:relative;
font-family:"Microsoft yahei";
position:absolute;
z-index:1000
}
.calender-wrap {
border:1px solid #e2e2e2
}
.calender-wrap:after {
content:'';
display:inline-block;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #eee;
border-top:0;
border-bottom-color:#d7d7d7;
position:absolute;
left:9px;
top:-7px
}
.calender-wrap:before {
content:'';
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #ffffff;
border-top:0;
position:absolute;
left:10px;
top:-6px;
z-index:10
}
.calender-caption {
height:35px;
border-bottom:1px solid #ddd;
z-index:2;
background:#eee
}
.calender-content {
position:relative;
overflow:hidden
}
.calender-content:after {
content:'';
display:block;
clear:both
}
.calender-cell {
cursor:pointer;
float:left;
width:14.28571428%;
height:35px;
text-align:center;
line-height:35px;
font-size:12px;
color:#000;
z-index:1;
border-bottom:1px solid #eee
}
.calender-cell:hover {
background:#eee
}
.calender-caption .calender-cell:hover {
background:none
}
.calender-cell-dark {
cursor:no-drop;
color:#b9b9b9
}
.calender-caption .calender-cell {
height:35px;
line-height:35px;
font-size:13px;
color:#111;
font-weight:bold
}
.calender-header {
text-align:center;
line-height:35px;
text-align:center;
color:#888;
padding-bottom:4px;
margin-bottom:1px;
background:#fff;
position:relative;
border-bottom:1px solid #e6e6e6;
font-size:14px
}
#calender-prev,#calender-next {
text-decoration:none;
display:block;
width:14.2857%;
height:35px;
background:#fff;
position:absolute;
left:0%;
top:0px;
font-family:'宋體';
font-size:14px;
color:#555
}
#calender-prev,#calender-next {
color:#999;
font-size:16px
}
#calender-prev:hover,#calender-next:hover {
background:#eee;
border-radius:5px;
color:#222
}
#calender-next {
left:auto;
right:0%
}
#calender-year,#calender-mon {
cursor:pointer;
padding:2px 4px;
border-radius: 3px;
margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
background:#eee
}
.calender-list {
overflow:hidden
}
.calender-list2,.calender-list3 {
display:none
}
.calender-year-cell,.calender-mon-cell {
width:32.41%;
float:left;
border-radius:4px;
text-align:center;
font-size:12px;
padding:15px 0;
border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
background:#eee;
cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
background:#23acf1;
color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
background:#23acf1;
color:#fff
}
.calender-button {
border-top:1px solid #eee;
width:100%;
margin-top:-1px;
padding:7px 0px 2px 0;
overflow:hidden
}
.calender-button a {
display:block;
text-align:center;
padding:0px 15px;
height: 25px;
line-height: 25px;
float:right;
background:#23acf1;
color:#fff;
margin-right:5px;
cursor:pointer;
margin-left:5px;
font-size:12px;
text-decoration:none
}
.calender-button a:hover {
background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
display:none
}
.calender-wrap.year .calender-list2 {
display:block
}
.calender-wrap.month .calender-list3 {
display:block
}
@keyframes clafade {
0% {
transform:scale(0.95);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}@-webkit-keyframes clafade {
0% {
-webkit-transform:scale(0.95);
opacity:0
}
100% {
-webkit-transform:scale(1);
opacity:1
}
} .calend {
display: block;
width: 180px;
line-height: 28px;
background: #222;
color: #fff;
padding: 5px 12px;
margin:20px 20px 20px 0;
font-size: 14px;
}
效果圖一（默認(rèn)參數(shù)）
效果圖二（顯示按鈕，設(shè)置時間）
完整實例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
.containter {
width:320px;
margin:auto
}
.calender-wrap {
-webkit-animation:clafade .3s ease;
-moz-animation:clafade .3s ease;
animation:clafade .3s ease;
padding:5px;
background:#fff;
width:240px;
box-shadow:0 5px 10px rgba(0,0,0,0.2);
border-radius:4px;
position:relative;
font-family:"Microsoft yahei";
position:absolute;
z-index:1000
}
.calender-wrap {
border:1px solid #e2e2e2
}
.calender-wrap:after {
content:'';
display:inline-block;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #eee;
border-top:0;
border-bottom-color:#d7d7d7;
position:absolute;
left:9px;
top:-7px
}
.calender-wrap:before {
content:'';
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #ffffff;
border-top:0;
position:absolute;
left:10px;
top:-6px;
z-index:10
}
.calender-caption {
height:35px;
border-bottom:1px solid #ddd;
z-index:2;
background:#eee
}
.calender-content {
position:relative;
overflow:hidden
}
.calender-content:after {
content:'';
display:block;
clear:both
}
.calender-cell {
cursor:pointer;
float:left;
width:14.28571428%;
height:35px;
text-align:center;
line-height:35px;
font-size:12px;
color:#000;
z-index:1;
border-bottom:1px solid #eee
}
.calender-cell:hover {
background:#eee
}
.calender-caption .calender-cell:hover {
background:none
}
.calender-cell-dark {
cursor:no-drop;
color:#b9b9b9
}
.calender-caption .calender-cell {
height:35px;
line-height:35px;
font-size:13px;
color:#111;
font-weight:bold
}
.calender-header {
text-align:center;
line-height:35px;
text-align:center;
color:#888;
padding-bottom:4px;
margin-bottom:1px;
background:#fff;
position:relative;
border-bottom:1px solid #e6e6e6;
font-size:14px
}
#calender-prev,#calender-next {
text-decoration:none;
display:block;
width:14.2857%;
height:35px;
background:#fff;
position:absolute;
left:0%;
top:0px;
font-family:'宋體';
font-size:14px;
color:#555
}
#calender-prev,#calender-next {
color:#999;
font-size:16px
}
#calender-prev:hover,#calender-next:hover {
background:#eee;
border-radius:5px;
color:#222
}
#calender-next {
left:auto;
right:0%
}
#calender-year,#calender-mon {
cursor:pointer;
padding:2px 4px;
border-radius: 3px;
margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
background:#eee
}
.calender-list {
overflow:hidden
}
.calender-list2,.calender-list3 {
display:none
}
.calender-year-cell,.calender-mon-cell {
width:32.41%;
float:left;
border-radius:4px;
text-align:center;
font-size:12px;
padding:15px 0;
border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
background:#eee;
cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
background:#23acf1;
color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
background:#23acf1;
color:#fff
}
.calender-button {
border-top:1px solid #eee;
width:100%;
margin-top:-1px;
padding:7px 0px 2px 0;
overflow:hidden
}
.calender-button a {
display:block;
text-align:center;
padding:0px 15px;
height: 25px;
line-height: 25px;
float:right;
background:#23acf1;
color:#fff;
margin-right:5px;
cursor:pointer;
margin-left:5px;
font-size:12px;
text-decoration:none
}
.calender-button a:hover {
background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
display:none
}
.calender-wrap.year .calender-list2 {
display:block
}
.calender-wrap.month .calender-list3 {
display:block
}
@keyframes clafade {
0% {
transform:scale(0.95);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}@-webkit-keyframes clafade {
0% {
-webkit-transform:scale(0.95);
opacity:0
}
100% {
-webkit-transform:scale(1);
opacity:1
}
} .calend {
display: block;
width: 180px;
line-height: 28px;
background: #222;
color: #fff;
padding: 5px 12px;
margin:20px 20px 20px 0;
font-size: 14px;
}
</style>
</head>
<body>
<div id="calend" class="calend">選擇日期</div>
<div id="calend1" class="calend">選擇日期</div>
<script>
window.calender = (function(win,doc){
function C(str){
this.dom = doc.querySelector(str);
this.s = {
date : [ new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()],
button : false,
format : 'yyyy年MM月dd日',
left : 0,
top: 0,
onload : function(){}
}
};
C.prototype = {
init : function(){
var t = this;
if( typeof arguments[0] == 'function'){
t.cb = arguments[0];
}else{
t.newS = arguments[0];
t.cb = arguments[1] || function(){}
};
t.yoff = false;
t.moff = false;
t.extend(t.s,t.newS);
t.nt = new Date();
t.nt.setFullYear(t.s.date[0]);
t.nt.setMonth(t.s.date[1]-1);
var len = this.getDateLength(t.nt.getFullYear(),t.nt.getMonth() )
t.nt.setDate(t.s.date[2]>len ? len : t.s.date[2]);
t.day = t.nt.getDate();
t.dom.onclick = function(ev){
var e = ev || event;
t.create();
t.bind();
t.s.onload.call(this)
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
};
},
hide : function(){
var t = this;
t.cb.call(t.dom,t.format( t.nt.getFullYear()+'/'+ (t.nt.getMonth()+1)+'/'+ t.day+' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(),t.s.format));
if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
},
bind : function(){
var t = this;
var Content = g('.calender-content');
t.createDay();
var Prev = g('#calender-prev'),
Next = g('#calender-next'),
Year = g('#calender-year'),
Mon = g('#calender-mon');
if(t.s.button){
var today = g('.calender-today');
var enter = g('.calender-ent');
today.onclick = function(){
t.nt.setFullYear(new Date().getFullYear());
t.nt.setMonth(new Date().getMonth());
t.nt.setDate( new Date().getDate());
t.s.date[2] = t.day = new Date().getDate()
t.createYear()
t.createDay()
t.createMon()
};
enter.onclick = function(){
t.hide();
}
}
Content.onclick = function(ev){
var ev = ev || event;
var _target = ev.target || ev.srcElement;
if(!t.has(_target,'calender-cell-dark') ){
var chl = this.children;
for(var i = 0;i<chl.length;i++){
t.del(chl[i],'active');
};
t.add(_target,'active');
t.nt.setDate(_target.getAttribute('data-n'));
t.s.date[2] = t.day = _target.getAttribute('data-n')
if(!t.s.button){
t.hide();
}
}
}
Prev.onclick = Next.onclick = function(){
var y = t.nt.getFullYear(),m = t.nt.getMonth();
if(t.moff) return
if(t.yoff){
t.nt.setFullYear( this.id=="calender-prev" ? y -= 9 : y += 9)
t.createYear()
}else{
this.id=="calender-prev" ? m-- : m++;
t.nt.setDate(1);
t.nt.setMonth( m );
t.createDay()
}
}
Year.onclick = function(){
t.createYear();
t.yoff = true;
t.moff = false;
t.del(g('.calender-wrap'),'month');
t.add(g('.calender-wrap'),'year');
};
Mon.onclick = function(){
t.createMon();
t.moff = true;
t.yoff = false;
t.del(g('.calender-wrap'),'year');
t.add(g('.calender-wrap'),'month');
};
},
getDateLength : function(year,month){
//獲取某一月有多少天, month為實際月份，一月即為1
return new Date(year,month,0).getDate();
},
getFirstDay : function(year,month){
//獲取某一月第一天是周幾,month為實際月份，一月即為1,返回0即為周日
return new Date(year,month-1,0).getDay();
},
createMon : function(){
var t= this,html='';
var m = t.nt.getMonth()+1;
m = m == 0 ? 12 : m;
for(var i = 1;i<=12;i++){
html+='<div class="calender-mon-cell '+( m == i ? 'active' : '') +' ">'+ (i) +'</div>';
};
g('.calender-list3').innerHTML = html;
var cells = doc.querySelectorAll('.calender-mon-cell');
for(var i2 = 0;i2<cells.length;i2++){
cells[i2].onclick = function(){
t.moff = false
t.del(g('.calender-wrap'),'month');
t.nt.setDate(1)
t.nt.setMonth(+this.innerHTML-1);
t.createDay();
}
}
},
createYear : function(){
var t= this,html='',y = (t.nt.getFullYear());
var Year = g('#calender-year');
for(var i = 0;i<9;i++){
html+='<div class="calender-year-cell '+( (y-(4-i)) == y ? 'active' :'') +' ">'+ (y-(4-i)) +'</div>';
}
Year.innerHTML = y
g('.calender-list2').innerHTML = html;
var cells = doc.querySelectorAll('.calender-year-cell');
for(var i2 = 0;i2<cells.length;i2++){
cells[i2].onclick = function(){
t.yoff = false;
t.del(g('.calender-wrap'),'year');
t.nt.setFullYear(+this.innerHTML);
t.createDay();
}
}
},
createDay : function(n){
var t = this,
y = t.nt.getFullYear(),
m = (t.nt.getMonth())+1;
g('#calender-year').innerHTML = m===0 ? y-1 : y;
g('#calender-mon').innerHTML = m === 0 ? 12 : two(m);
// if(t.nt.getMonth()+1 == t.s.date[1] && t.nt.getFullYear()==t.s.date[0] ){
// t.nt.setDate(t.s.date[2]);
// };
var firstDay = this.getFirstDay(y,m),
length = this.getDateLength(y,m),
lastMonthLength = this.getDateLength(y,m-1),
i,html = '';
t.day = t.s.date[2] > length ? length : t.s.date[2];
//循環(huán)輸出月前空格
if(firstDay ===0) firstDay = 7;
for(i=1;i<firstDay+1;i++){
html += '<div class="calender-cell calender-cell-dark">' + (lastMonthLength - firstDay + i) + '</div>';
}
//循環(huán)輸出當(dāng)前月所有天
for(i=1;i<length+1;i++){
html += '<div data-n='+i+' class="calender-cell '+ (i == t.day ? 'active' :'') +'">' + i + '</div>';
}
//if(8-(length+firstDay)%7 !=8){
for(i=1;i<= (41-(length+(firstDay==0 ? 7 : firstDay)-1));i++){
html+= '<div class="calender-cell calender-cell-dark">' + i + '</div>';
};
doc.querySelector('.calender-content').innerHTML = html
},
create : function(){
var t= this;
if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
var private_Day_title=['一','二','三','四','五','六','日'];
//內(nèi)容
var html = '<div class="calender-wrap">';
html +='<div id="calender-header" class="calender-header none-btn "><a id="calender-prev" href="javascript:;"><</a><a id="calender-next" href="javascript:;">></a> <span id="calender-year">2016</span>年<span id="calender-mon">10</span>月</div>'
//星期
html += '<div class="calender-list"><div class="calender-caption">';
for(i=0;i<7;i++){
html += '<div class="calender-cell">' + private_Day_title[i] + '</div>';
};
html += '</div><div class="calender-content"></div>';
if(this.s.button){
html+='<div class="calender-button"><a href="javascript:;" class="calender-ent">確定</a><a href="javascript:;" class="calender-today">今天</a></div>';
};
html += '</div><div class="calender-list calender-list2"></div><div class="calender-list calender-list3"></div>'
doc.body.insertAdjacentHTML("beforeend", html);
var wrap = g('.calender-wrap');
function setPosi(){
var _top = doc.documentElement.scrollTop || doc.body.scrollTop;
wrap.style.left = t.dom.getBoundingClientRect().left +t.s.left +'px';;
wrap.style.top = t.dom.getBoundingClientRect().top + _top + t.dom.offsetHeight+t.s.top + 15 +'px';
};
setPosi();
addEvent(window,'resize',function(){setPosi()})
wrap.onclick = function(ev){
var e = ev || event;
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
}
},
format : function(da,format){
var _newDate = new Date(da);
var WeekArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var o = {
'M+' : _newDate.getMonth()+1, //month
'd+' : _newDate.getDate(), //day
'h+' : _newDate.getHours(), //hour
'm+' : _newDate.getMinutes(), //minute
's+' : _newDate.getSeconds(), //second
'q+' : Math.floor((_newDate.getMonth()+3)/3), //quarter
'S': _newDate.getMilliseconds(), //millisecond
'E': WeekArr[_newDate.getDay()],
'e+' : _newDate.getDay()
};
if (/(y+)/.test(format)){
format = format.replace(RegExp.$1, (_newDate.getFullYear()+"").substr(4 - RegExp.$1.length));
};
for(var k in o) {
if(new RegExp('('+ k +')').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ('00'+ o[k]).substr((''+ o[k]).length));
};
};
return format;
},
extend : function(n,n1){
for(var i in n1){n[i] = n1[i]};
},
has : function(o,n){
return new RegExp('\\b'+n+'\\b').test(o.className);
},
add : function(o,n){
if(!this.has(o, n)) o.className+=' '+n;
},
del : function(o,n){
if(this.has(o, n)){
o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, '');
};
}
};
function g(str){return doc.querySelector(str)};
function addEvent(obj,name,fn){obj.addEventListener? obj.addEventListener(name, fn, false):obj.attachEvent('on'+name,fn);};
function two(num){return num<10 ? ('0'+num) : (''+num)};
addEvent(doc,'click',function(){
if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
});
function c(o){return new C(o)};return c;
})(window,document);
;(function(){
calender('#calend').init(function(date){
this.innerHTML = date
});
calender('#calend1').init({format : 'yyyy-MM-dd',
date : [2020,5,12],
button : true
},function(date){
this.innerHTML = date
});
})();
</script>
</body>
</html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了element-ui?動態(tài)換膚,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
用Javascript判斷圖片大小，其實只要寫一個簡單的函數(shù)就可以了，使用其他語言進行判斷，過程比較復(fù)雜，用 Javascript 判斷輕松搞定2014-11-11
js將json格式的對象拼接成復(fù)雜的url參數(shù)方法
下面小編就為大家?guī)硪黄猨s將json格式的對象拼接成復(fù)雜的url參數(shù)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
擴展js對象數(shù)組的OrderByAsc和OrderByDesc方法實現(xiàn)思路
js的擴展方法是基于原型的，如Array.prototype.XXXX就是給Array擴展XXX方法，然后數(shù)組都能使用這個方法了，在對象數(shù)組里面經(jīng)常有根據(jù)屬性來進行排序的，升序，降序的，下面與大家分享自己寫的一個2013-05-05
這篇文章主要給大家分享的是常用的js函數(shù)的方法，告別搜索引擎的幫助，提高你的開發(fā)效率，,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
JavaScript必知必會(九）function 說起 閉包問題
這篇文章主要介紹了JavaScript必知必會(九）function 說起 閉包問題的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗證開發(fā)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文主要給大家介紹的是javascript中的擴展方法字符串trim()的使用指南，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要為大家詳細(xì)介紹了小程序自定義日歷效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件
這篇文章主要介紹了JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01