jQuery 日期选择器周时间选择

周时间选择器器

以当前日期做周日期的起始日期,可以选择哪年的那一周(第几周选择) ,周日期选择器.

HTML代码:

 











	

		×
		
选择年份：
		

			<
			
			>
		
		
选择周：
		

			<
			
			>
		
		

			本周
			确定
		
	


  //本地路径
////本地路径

JS代码

/*--周日历--*/
function jcalendar_week(options){
	var _this=this;
	var defaults={
		element: "#jcalendar_week",
		dayclick:function(date,obj){
			//day点击事件
			$(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act");
		},
		dayaddclass:function(date){
			return null;
		},
		showbtn:true,
	};
	var opts = $.extend(defaults,options);
	
	var calendarid = $(opts.element);
	//DOM添加
	function addDOM(){
		calendarid.html("");
		var before_btn=opts.showbtn?'<':'';
		var after_btn=opts.showbtn?'>':'';
		var header_dom = '
'+
					before_btn+
					'
'+
					after_btn+
				'
';
		calendarid.append(header_dom);
	}
	addDOM();
		
	//获取今天
	var todaydate = function(){
		var nstr = new Date();
		var ynow = nstr.getFullYear();
		var mnow = nstr.getMonth();
		var dnow = nstr.getDate();
		return [ynow,mnow,dnow];
	}
	//判断是否为闰年
	var is_leap = function(year){
		return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
	}
	//获取周第一天日期方法
	_this.weekfirstdate = function(year,weeknum){
		//获取当年月份天数数组
		var m_days=[31,28+is_leap(year),31,30,31,30,31,31,30,31,30,31];
		//获取当年第一天是周几
		var newyear_week=(new Date(year,0,1)).getDay();
		//新年到周第一天的总天数
		var week_day;
		if(newyear_week < 5){
			//新年第一天算年内第一周[周四在本年]
			week_day = 7*(weeknum-2)+(7-newyear_week+1);
		}else{
			//新年第一天是上年最后一周
			week_day = 7*(weeknum-1)+(7-newyear_week+1);
		}
		var startmouch;
		for(var i=0;im_days[i]){
				week_day-=m_days[i];
				if(i==m_days.length-1){
					year++;	
					startmouch=0;
				}
			}else{
				break;
			}
		}
		return [year,startmouch,week_day];
	}
	
	//设置周日历
	var setdaydata = function(year,weeknum){

		//获取月份天数数组
		var m_days=[31,28+is_leap(year),31,30,31,30,31,31,30,31,30,31];
		//获取周第一天日期
		var datastart=_this.weekfirstdate(year,weeknum);
		//根据日期判断显示正确的数据（比如传入的值比总周数大）
		var trueweeknum = _this.getweeknum(datastart[0],datastart[1],datastart[2]);
		calendarid.attr({
			"year":trueweeknum[0],
			"weeknum":trueweeknum[1]
		})
		$("#setyear").val(trueweeknum[0]);
		$("#setweek").val(trueweeknum[1]);
		calendarid.find(".calendar_info").html(trueweeknum[1]+'周/'+trueweeknum[0]);

		var week_day="";
		var isdayaddclass=false;
		if(opts.dayaddclass()!==null){
			isdayaddclass=true;
		}
		var dayaddclass="";
		var newdate;
		for(var i=0;i<7;i++){
			newdate=new Date(datastart[0],datastart[1],datastart[2]+i);
			if(isdayaddclass){
				dayaddclass=" "+opts.dayaddclass(newdate.getFullYear()+'-'+(newdate.getMonth()+1)+'-'+newdate.getDate());
			}
			var istoday='';
			var todayarr=todaydate();
			if(newdate.getFullYear()==todayarr[0] && newdate.getMonth()==todayarr[1] && newdate.getDate()==todayarr[2]){
				istoday = '今天';
			}
			week_day+='
'+
				''+newdate.getDate()+''+istoday+
			'
';
		}
		newdate=null;
		calendarid.find(".calendar_day_bar").html(week_day);
	}

	//传入日期为当年第几周
	_this.getweeknum = function(year,month,day){
		//获取月份天数数组
		var m_days=[31,28+is_leap(year),31,30,31,30,31,31,30,31,30,31];

		var newtonowday=0;
		for(var i=0;i1 && fdaynothisy){
				weeknum_result=53;
			}else{
				weeknum_result=52;
			}
			weekyear--;
		}else if(weeknum_result>52){
			var year_lweek=(new Date(year,11,31)).getDay();
			if(year_lweek > 3 && newyear_week < 5){
				weeknum_result=53;
			}else{
				weekyear++;
				weeknum_result=1;
			}
		}
		return [weekyear,weeknum_result];
	}
	
	//DOM添加
	_this.confirmweek = function(year,weeknum){
		if(!year) year=$("#setyear").val();
		if(!weeknum) weeknum=$("#setweek").val();
		if(weeknum<1) weeknum=1;
		
		setdaydata(year,weeknum);
		
		//上一周
		calendarid.find(".beforem_btn").off("click").on("click",function(){
			var beforew=weeknum-1;
			var beforeweekfirst=_this.weekfirstdate(year,beforew);
			var beforeweekdata=_this.getweeknum(beforeweekfirst[0],beforeweekfirst[1],beforeweekfirst[2]);
			_this.confirmweek(beforeweekdata[0],beforeweekdata[1]);
		})
		//下一周
		calendarid.find(".afterm_btn").off("click").on("click",function(){
			var afterw=weeknum+1;
			var afterweekfirst=_this.weekfirstdate(year,afterw);
			var afterweekdata=_this.getweeknum(afterweekfirst[0],afterweekfirst[1],afterweekfirst[2]);
			_this.confirmweek(afterweekdata[0],afterweekdata[1]);
		})
		//day点击事件
		calendarid.find(".calendar_day").on("click",function(){
			var obj=$(this);
			opts.dayclick(obj.attr("date"),this);
		})
	}
	//本周
	_this.nowweek = function(){
		var todayarr=todaydate();
		var weekdata=_this.getweeknum(todayarr[0],todayarr[1],todayarr[2]);
		_this.confirmweek(weekdata[0],weekdata[1]);
	}
	_this.nowweek();
}

CSS代码:

/*-日历样式-*/
.flex_i{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items:center;
	align-items:center;
}
.flex_auto{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.calendar_header{
	padding: 0.25rem 0.5rem 0;
}
.switch_month{
	border: 0;
	background-color: transparent;
	padding: 0.5rem 1rem;
}
.switch_month:active{
	background-color: #eee;
}
.calendar_info{
  text-align: center;
	padding: 0.5rem;
}
.calendar_tr{
	font-size: 0.75rem;
}
.calendar_tr:after{
	content:"";
	display: block;
	clear: both;
	padding: 0 1%;
}
.calendar_tr > li{
	float: left;
	width: 14%;
	text-align: center;
	padding: 0.5rem 0;
	position: relative;
}
.calendar_week{
	border-bottom: solid 1px #ddd;
}
.calendar_week > li{
	padding: 1rem 0;
}
.notnowmonth{
	color: #aaa;
}
.calendar_day_bar{
	padding: 0.5rem 0;
}
.calendar_day_i{
	display: inline-block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
}
.calendar_day_act .calendar_day_i{
	background-color: #ec612a;
	color: #fff;
	border-radius: 50%;
}
.calendar_today{
	position: relative;
}
.today_i{
	display: block;
	position: absolute;
	bottom: -webkit-calc(100% - 0.875rem);
	bottom: calc(100% - 0.5rem);
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 2rem;
	line-height: 1rem;
	background-color: #333;
	color: #fff;
	font-size: 0.5rem;
}
.today_i:before{
	content:"";
	display: block;
	border:solid 0.15rem transparent;
	border-bottom: 0;
	border-top-color: #333;
	border-left-width: 0.25rem;
	border-right-width: 0.25rem;
	width: 0;
	height: 0;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: auto;
}
.br_b_ccc{
	border-bottom: solid 1px #ccc;
}
.ric_calendar .calendar_header{
	padding: 0 1.5rem;
}
.ric_calendar .calendar_day_bar > li{
	padding: 0;
}
.ric_calendar .today_i{
	display: none;
}
.ric_calendar .notnowmonth{
	color: #eee;
}
.ric_calendar .calendar_day_bar{
	padding-bottom: 1rem;
}
.calendarday_bz1:after,.calendarday_bz2:after{
	content:"";
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: #1DA8FC;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.calendarday_bz2:after{
	background-color: #ec612a;
}
.jcalendar_week .calendar_week > li,.jcalendar_week .calendar_tr > li{
	padding: 0;
}
.jcalendar_week .calendar_header{
	border-bottom: solid 1px #ddd;
	padding-bottom: 0.25rem;
}
.jcalendar_week .calendar_day_bar{
	padding: 0.75rem 0 0.25rem;
}
.jcalendar_week .calendar_week{
	padding-bottom: 1rem;
	font-size: 0.625rem;
}
.jc_week_act .calendar_day_i{
	background-image: url(../img/day_bd.png);
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
}
/*--日历样式结束--*/
/*-弹框-*/
.pop_bd{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: none;
}
.pop_con{
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	max-width: 500px;
	width: 75%;
	background-color: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
}
.pop_close{
	position:absolute;
	right:0.5rem;
	top:0.5rem;
	display: block;
	width: 1.5rem;
	text-align: center;
	height: 1.5rem;
	line-height: 1.5rem;
	font-size: 1.5rem;
	color: #666666;
	font-family: -webkit-body;
	font-family: body;
	border-radius: 0.25rem;
}
.pop_close:active{
	background-color: #eee;
}
.control{
	text-align: center;
	padding: 1rem 0;
}
.control > button{
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	border: solid 1px #aaa;
	background-color: transparent;
}
.control_val{
	height: 2rem;
	border: 0;
	background-color: #f5f5f5;
	text-align: center;
}
.setjc_st,.setjc_btn{
	height: 2.25rem;
	padding: 0 1rem;
	margin: 0.5rem 0;
	border-radius: 0.25rem;
}
.setjc_btn{
	background-color: #1DA8FC;
	color: #fff;
	border: 0;
}
.nowweek_btn{
	margin-right:0.5rem;
	flex: 0.5;
}

最终效果展示:

点击可以进行年以及周选择:

备注(根据年份计算一年多少周):

/**
 * 根据年份计算总周数
 * @param year
 * @returns {number}
 */
function getNumOfWeeks(year) {
    //设置为这一年开始日期
    var startDateOfYear = new Date(year, 0, 1);
    //计算这一年有多少天
    var daysOfYear = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 366 : 365;
    //366（365）/7=52.2(52.1)，所以一般一年有52周余1天或者2天，当这一年有366天时且第一天是周日，那么他的最后一天则是周一，这一年就有54周。
    var weekNum = 53;
    //当年份是闰年且第一天是周日时有54周
    if (startDateOfYear.getDay() == 0 && daysOfYear == 366) {
        weekNum = 54;
    }
    return weekNum;
}