周时间选择器器
以当前日期做周日期的起始日期,可以选择哪年的那一周(第几周选择) ,周日期选择器.
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代码