前言：
而今咱们对“jquery封装日历插件”都比较关切，各位老铁们都需要剖析一些“jquery封装日历插件”的相关文章。那么小编也在网上搜集了一些关于“jquery封装日历插件””的相关资讯，希望姐妹们能喜欢，小伙伴们一起来了解一下吧！源代码
调用方式
这是本人自己开发的一款小型日期插件
这是效果图
/*调用实例代码*/
$('button').click(function(){
$(this).date({
start:'1999-02-03',//开始时间 格式 '2010' ||'2010-02'默认为1974-1-1
current:'2018-02-03',//当前时间，格式 '2010' ||'2010-02'默认为本地当前时间
end:'2022-02-03',//结束时间，格式 '2010' ||'2010-02'默认为本地当前时间
success:function(date){//回调函数，date用户点击确定时返回的时间参数
alert(date);
}
});
});
/*源代码*/
jQuery.prototype.date = function(obj) {
console.log(this.height())
if($('#date').length>0)$('#date').remove();
var _this=this;
var date=new Date();
var start = obj.start != undefined ? obj.start.split('-') : [1974,1,1];
var end = obj.end != undefined ? obj.end.split('-') : [date.getFullYear(),date.getMonth()+1,date.getDate()];
var current = obj.current != undefined ? obj.current.split('-') : [date.getFullYear(),date.getMonth()+1,date.getDate()];
start[0]=start[0]!=undefined ? start[0] : 1974;
start[1]=start[1]!=undefined ? start[1] : 1;
start[2]=start[2]!=undefined ? start[2] : 1;
end[0]=end[0]!=undefined ? end[0] : date.getFullYear();
end[1]=end[1]!=undefined ? end[1] : date.getMonth()+1;
end[2]=end[2]!=undefined ? end[2] : date.getDate();
current[0]=current[0]!=undefined ? current[0] : date.getFullYear();
current[1]=current[1]!=undefined ? current[1] : date.getMonth()+1;
current[2]=current[2]!=undefined ? current[2] : date.getDate();
//console.log(start,end,current)
_this.date.month=current[1];
_this.date.year=current[0];
var box_top = '<div style="width:100%;height:50px;border-bottom:1px solid #ccc;"><a class="date_a_prev" style="'+_this.date.css.box_top_a+'" href="javascript:;"><</a><select style="'+_this.date.css.box_top_select+'padding-left:10px;">';
//注入年份
var selected_year;
_this.date.value=current[0];
for(var i=start[0];i<=end[0];i++){
selected_year=i==current[0] ? 'selected' : ' ';
box_top += '<option value="'+i+'" '+selected_year+'>'+i+'</option>';
}
box_top += '</select><select style="'+_this.date.css.box_top_select+'padding-left:18px;">';
//注入月份
box_top += _this.date.injection_month(start,end,current);
//注入日历
box_top += '</select><a style="'+_this.date.css.box_top_a+'" class="date_a_next" href="javascript:;">></a></div>';
var box_center_li='<ul style="margin:0;padding:0;">';
var date=new Date();
date.setMonth(_this.date.month-1);//获取当前月份
date.setFullYear(current[0]); //获取当前年份
box_center_li += _this.date.getDateList(date,start,end);
box_center_li += '</ul>';
var box_center='<div style="width:100%;height:260px;">'+box_center_li+'</div>';
var box_bottom='<div style="width:100%;height:38px;background:#fff;border-top:1px solid #ccc;"><button style="'+_this.date.css.box_bottom_button+'">取消</button><span style="'+_this.date.css.box_bottom_span+'">'+current[0]+'-'+current[1]+'-'+current[2]+'</span><button style="'+_this.date.css.box_bottom_button+'">确定</button></div>';
$('body').append('<div id="date" style="Z-index:10000;width:300px;height:350px;border:1px solid #ccc;background:#fff;position:absolute;top:'+parseInt(_this.offset().top+_this.height())+'px;left:'+parseInt(_this.offset().left+_this.width())+'px;" >'+box_top+box_center+box_bottom+'</div>');
$('#date select').eq(0).on('change',function(){//年份
_this.date.year=this.value;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,this));
var obj=new Date();
obj.setMonth(_this.date.month-1);//获取当前月份
obj.setFullYear(this.value); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
});
$('#date select').eq(1).on('change',function(){//月份
_this.date.month=this.value;
var obj=new Date();
obj.setMonth(this.value-1);//获取当前月份
obj.setFullYear(_this.date.year); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
});
$('#date').on('click','a.date_a_prev',function(){//上个月
//console.log($('#date select').get(0).selectedIndex)
//console.log($('#date select').get(0).options.length);
var select_one_index=$('#date select').get(0).selectedIndex;
var select_two_index=$('#date select').get(1).selectedIndex;
if(select_two_index > 0){
$('#date select').get(1).selectedIndex=select_two_index-1;
//console.log($('#date select').get(1).options[select_two_index-1].value);
_this.date.month=$('#date select').get(1).options[select_two_index-1].value;
var obj=new Date();
obj.setMonth(_this.date.month-1);//获取当前月份
obj.setFullYear(_this.date.year); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}else{
if(select_one_index>0){
_this.date.year=$('#date select').get(0).options[select_one_index-1].value;
$('#date select').get(0).selectedIndex=select_one_index-1;
_this.date.month=12;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,$('#date select').get(0)));
var obj=new Date();
obj.setMonth(11);//获取当前月份
obj.setFullYear(_this.date.year); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}
}
});
$('#date').on('click','a.date_a_next',function(){//下个月
//console.log($('#date select').get(0).selectedIndex)
//console.log($('#date select').get(0).options.length);
var select_one_index=$('#date select').get(0).selectedIndex;
var select_two_index=$('#date select').get(1).selectedIndex;
var select_one_option=$('#date select').get(0).options.length;
var select_two_option=$('#date select').get(1).options.length;
if(select_two_index < select_two_option-1){
//console.log(select_two_index , select_two_option)
$('#date select').get(1).selectedIndex=select_two_index+1;
//console.log($('#date select').get(1).options[select_two_index+1].value);
_this.date.month=$('#date select').get(1).options[select_two_index+1].value;
var obj=new Date();
obj.setMonth(_this.date.month-1);//获取当前月份
obj.setFullYear(_this.date.year); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}else{
if(select_one_index < select_one_option-1){
//console.log(select_one_index , select_one_option);
$('#date select').get(0).selectedIndex=select_one_index+1;
_this.date.year=$('#date select').get(0).options[select_one_index+1].value;
_this.date.month=1;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,$('#date select').get(0)));
var obj=new Date();
obj.setMonth(0);//获取当前月份
obj.setFullYear(_this.date.year); //获取当前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}
}
});
//鼠标经过时
$('#date').on('mouseenter','li.bg',function(){
this.style.background='#ccc';
})
$('#date').on('mouseleave','li.bg',function(){
this.style.background='#eee';
})
$('#date').on('click','li.bg',function(){
$('#date span').html($('#date select').eq(0).val()+'-'+$('#date select').eq(1).val()+'-'+$(this).html());
//console.log();
});
$('#date').on('click','button:first',function(){
//console.log(obj);
$('#date').remove();
});
$('#date').on('click','button:last',function(){
//console.log(obj);
obj.success($('#date span').html());
$('#date').remove();
});
}
//注入月份函数
jQuery.prototype.date.injection_month=function(start,end,current,_this){
if(arguments.length==3){
var start_month = current[0]==start[0]&&start[1]!=undefined ? start[1] : 1;
var end_month = current[0]==end[0]&&end[1]!=undefined ? end[1] : 12;
var year_flag=current[0]==start[0] ? 'start' : current[0]==end[0] ? 'end' : 'center';
}else {
var start_month = _this.value==start[0]&&start[1]!=undefined ? start[1] : 1;
var end_month = _this.value==end[0]&&end[1]!=undefined ? end[1] : 12;
var year_flag=_this.value==start[0] ? 'start' : _this.value==end[0] ? 'end' : 'center';
}
var month='';
var selected_month='';
var selected_id='';
//console.log(this.month)
for(var i=start_month;i<=end_month;i++){
if(i==this.month) {
selected_month='selected';
selected_id=i;
}
month += '<option value="'+i+'" '+selected_month+'>'+i+'</option>';
selected_month=' ';
}
if(selected_id==''){
month='';
selected_id=year_flag=='start' ? start_month : year_flag=='end' ? end_month : this.month;
for(var i=start_month;i<=end_month;i++){
selected_month = selected_id==i ? 'selected' : ' ';
month += '<option value="'+i+'" '+selected_month+'>'+i+'</option>';
}
}
this.month=selected_id!='' ? selected_id : 1;
return month;
}
//获取本月有多少天
jQuery.prototype.date.getDateNum=function(month,year,start,end){
var day30 = [4, 6, 9, 11];
var day31 = [1, 3, 5, 7, 8, 10, 12];
var date_array = [];
var type=start[0]==year&&start[1]==month&&year==end[0]&&end[1]==month ? 'current' : start[0]==year&&start[1]==month ? 'start' : year==end[0]&&end[1]==month ? 'end' : 'center';
this.checkDay=function(num,type){
if(type=='end'){
num=parseInt(num);
//console.log(typeof num);
for(var i=1;i<num+1;i++){
date_array[i]=i;
}
return date_array;
}else if(type=='start'){
num=parseInt(num);
if ($.inArray(month,day30 )>=0) { //月份为30天
for(var i=num;i<31;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份为31天
for(var i=num;i<32;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4 == 0 || parseInt(year) % 400 == 0) { //29天
for(var i=num;i<30;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=num;i<29;i++){
date_array[i]=i;
}
return date_array;
}
}
}else if(type=='current'){
if ($.inArray(month,day30 )>=0) { //月份为30天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份为31天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4 == 0 || parseInt(year) % 400 == 0) { //29天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
}
}
}else if(type=='center'){
if ($.inArray(month,day30 )>=0) { //月份为30天
for(var i=1;i<31;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份为31天
for(var i=1;i<32;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4 == 0 || parseInt(year) % 400 == 0) { //29天
for(var i=1;i<30;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=1;i<29;i++){
date_array[i]=i;
}
return date_array;
}
}
}
}
if(type=='start'){
return this.checkDay(start[2],'start');
}else if(type=='end'){
return this.checkDay(end[2],'end');
}else if(type=='current'){
return this.checkDay({'start':start[2],'end':parseInt(end[2])+1},'current');
}else {
return this.checkDay(null,'center');
}
}
jQuery.prototype.date.getDateList=function(obj,start,end){
obj.setDate(1); // 设置日期为1,
var Dday=obj.getDay(); //获取当月第一天是星期几
var Dmonth=obj.getMonth();//获取当前月份
var Dyear=obj.getFullYear(); //获取当前年份
var date_num=this.getDateNum(Dmonth+1,Dyear,start,end);
//console.log(date_num);
var box_center_li='';
var day_array=['日','一','二','三','四','五','六'];
for(var i=0;i<day_array.length;i++){
box_center_li += '<li style="'+this.css.box_center_li+'background:#fff;">'+day_array[i]+'</li>';
}
for(var i=0;i<Dday;i++){
box_center_li += '<li style="'+this.css.box_center_li+'background:#f5f5f5;"></li>';
}
for(var i=1;i<date_num.length;i++){
//console.log(date_num[i])
if(date_num[i]!=undefined){
box_center_li += '<li class="bg" style="'+this.css.box_center_li+'background:#eee;">'+date_num[i]+'</li>';
}else {
box_center_li += '<li style="'+this.css.box_center_li+'background:#eee;"></li>';
}
}
for(var i=0;i<42-(date_num.length+Dday-1);i++){
box_center_li += '<li style="'+this.css.box_center_li+'background:#f5f5f5;"></li>';
}
return box_center_li;
}
jQuery.prototype.date.css={
box_top_a:'display:inline-block;color:#000;width:50px;height:50px;line-height:50px;text-align:center;vertical-align: middle;text-decoration:none;font-size:30px;font-weight:bold;',
box_top_select:'width:82px;height:30px;border:1px solid #ccc;text-align:center;padding:0px 5px;box-sizing: border-box;font-size:18px;vertical-align:middle;margin:0 9px;',
box_center_li:'margin:1px;list-style-type:none;width:13.61%;height:35px;float:left;text-align:center;line-height:35px;cursor:pointer;',
box_bottom_span:'display:inline-block;width:50%;height:38px;vertical-align:middel;text-align:center;line-height:38px;',
box_bottom_button:'width:25%;height:38px;border:0;font-size:20px;color:#000;background:#fff;cursor:pointer;'
}
如果你有前端或php问题都可以私信我，我可以帮你解决
标签： #jquery封装日历插件
