jQuery 日期选择器周时间选择

最新推荐文章于 2024-05-31 16:25:46 发布

Jantelope

最新推荐文章于 2024-05-31 16:25:46 发布

阅读量2.6k

点赞数 2

分类专栏： JS代码文章标签： js css html jquery javascript

本文链接：https://blog.csdn.net/Jantelope/article/details/106261649

版权

周时间选择器器

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

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();">&times;</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

最低0.47元/天解锁文章

Jantelope

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
jQuery 日期选择器周时间选择

周时间选择器器以当前日期做周日期的起始日期,可以选择哪年的那一周(第几周选择) ,周日期选择器.HTML代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="textml; charset=UTF-8" /><title>周时间选择器</title><link href="css/style.css" rel="stylesh
复制链接

扫一扫