龙空技术网

基于ajax开发的小型日期插件

深碍Web 143

前言:

此刻各位老铁们对“jquery排班时间插件”大约比较看重,大家都想要分析一些“jquery排班时间插件”的相关资讯。那么小编同时在网摘上搜集了一些有关“jquery排班时间插件””的相关资讯,希望朋友们能喜欢,各位老铁们快快来学习一下吧!

基于jq制作简单的日期插件,源代码简单易懂

视频加载中...

下面是源代码

/*

$('input').eq(0).date({

start:'2010-02-03',开始时间 格式 '2010' ||'2010-02'默认为1974-1-1

current:'2018-02-03',当前时间,格式 '2010' ||'2010-02'默认为本地当前时间

end:'2020-02-03',结束时间,格式 '2010' ||'2010-02'默认为本地当前时间

success:function(date){回调函数,date用户点击确定时返回的时间参数

console.log(date);

}

});

*/

jQuery.prototype.date = function(obj) {

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:;">&lt;</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:;">&gt;</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排班时间插件 #jquery日期控件年月 #ajax加时间 #手机jquery日期插件下载