周时间选择器器
以当前日期做周日期的起始日期,可以选择哪年的那一周(第几周选择) ,周日期选择器.
HTML代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="textml; charset=UTF-8" /><title>周时间选择器</title><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div style="max-width: 200px;margin:0 auto;border: solid 1px #ccc;"><div class="bd_w jcalendar_week" id="jcalendar_week"></div><div class="pop_bd" id="pop"><div class="pop_con"><span class="pop_close" onClick="$('#pop').hide();">×</span><h5>选择年份：</h5><div class="flex_i control"><button onClick="$(this).next().val(parseInt($(this).next().val())-1)"><</button><input class="flex_auto control_val" type="text" id="setyear" value="- -" /><button onClick="$(this).prev().val(parseInt($(this).prev().val())+1)">></button></div><h5>选择周：</h5><div class="flex_i control"><button onClick="$(this).next().val(parseInt($(this).next().val())-1)"><</button><input class="flex_auto control_val" type="text" id="setweek" value="- -" /><button onClick="$(this).prev().val(parseInt($(this).prev().val())+1)">></button></div><div class="flex_i"><button class="setjc_btn nowweek_btn flex_auto" onClick="tonowweek()">本周</button><button class="setjc_btn flex_auto" onClick="jumpweek()">确定</button></div></div></div></div><script type="text/javascript" src="js/jquery.min.js"></script> //本地路径<script type="text/javascript" src="js/script.js"></script>本地路径<script>//调用周日历var weekfn = new jcalendar_week({element: "#jcalendar_week",//填充日历的dom元素dayclick:function(date,obj){//day点击事件$(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act");}});//跳转到指定周function jumpweek(){var getyear=parseInt($("#setyear").val());var getweek=parseInt($("#setweek").val());weekfn.confirmweek(getyear,getweek);$('#pop').hide();}//跳转到本周function tonowweek(){weekfn.nowweek();$('#pop').hide();}</script></div></body></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?'<button class="switch_month beforem_btn"><</button>':'';var after_btn=opts.showbtn?'<button class="switch_month afterm_btn">></button>':'';var header_dom = '<div class="flex_i calendar_header ">'+before_btn+'<div class="flex_auto calendar_info" onclick="$(\'#pop\').show();"></div>'+after_btn+'</div>';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;i<m_days.length;i++){startmouch=i;if(week_day>m_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 = '<span class="today_i">今天</span>';}week_day+='<li class="calendar_day'+dayaddclass+'" '+'date="'+newdate.getFullYear()+'-'+(newdate.getMonth()+1)+'-'+newdate.getDate()+'">'+'<span class="calendar_day_i">'+newdate.getDate()+'</span>'+istoday+'</li>';}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;i<month;i++){newtonowday += m_days[i];}newtonowday += day;//获取当年第一天是周几var newyear_week=(new Date(year,0,1)).getDay();var fdaynothisy=false;//新年到周第一天的总天数if(newyear_week < 5){//新年第一天算年内第一周[周四在本年]newtonowday += newyear_week;if(newyear_week==0 && m_days[2]==29){fdaynothisy=true;}}else{//新年第一天是上年最后一周fdaynothisy=true;newtonowday -= (7-newyear_week);}var weeknum_result = Math.ceil(newtonowday/7);var weekyear=year;if(weeknum_result==0){var beforeyear_fweek=(new Date(weekyear-1,0,1)).getDay();if(beforeyear_fweek<5 && beforeyear_fweek>1 && 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;}
