使用swiper+jquery制作移动端日期选择器插件

最新推荐文章于 2023-12-04 21:45:00 发布

专业前端小白

最新推荐文章于 2023-12-04 21:45:00 发布

阅读量1.2k

点赞数

分类专栏： swiper jquery插件日期选择器文章标签： swiper jquery插件日期选择器

本文链接：https://blog.csdn.net/qq_41756580/article/details/87933202

版权

jquery插件同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

swiper

1 篇文章 0 订阅

订阅专栏

日期选择器

1 篇文章 0 订阅

订阅专栏

自己编写一个jquery工具，因为项目需要，编写了这么一个可以选择某天，某月，某年的移动端日期选择控件：

直接上代码html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>考勤统计</title>
		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"> -->
		<link rel="stylesheet" type="text/css" href="css/dateMonthYearPicker.css">
		<style type="text/css">
			html,body{
				background: #aaa;
				padding: 0;
				margin: 0;
			}
			.center{
				width: 80%;
				height: 200px;
				margin: 0 auto;
				background-color: #E0A41E;
				text-align: center;
				line-height: 200px;
			}
			.input{
				width: 80%;
				height: 40px;
				line-height: 40px;
				border: 2px solid #ddd;
				border-radius: 5px;
				padding: 0px 10px;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<input type="text" id="datetime" class="input" placeholder="选择时间" readonly="readonly">
		</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script type="text/javascript" src="js/dateMonthYearPicker.js"></script>
<script>
	$(document).ready(function(){
	
		$("#datetime").datePicker({
			format: "yyyy-mm-dd",
			startYear: 2010,
			endYear: 2020,
			dateChangeBefore: function(date){
				console.log(date);
			},
		});

	});
</script>
	</body>
</html>

dateMonthYearPicker.css：

.bigBox{
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
}
.bigBox .bottomDiv{
	width: 100%;
	height: 240px;
	position: absolute;
	bottom: -240px;
	left: 0px;
	background-color: white;
	transition: all 0.25s;
}
.bigBox .bottomDiv .titleBox{
	width: 100%;
	height: 40px;
	position: relative;
	border-bottom: 1px solid #ddd;
}
.bigBox .bottomDiv .titleBox .exitBtn{
	position: absolute;
	left: 10px;
	display: inline-block;
	text-decoration: none;
	color: #333;
	cursor: pointer;
	height: 39px;
	line-height: 39px;
}
.bigBox .bottomDiv .titleBox .trueBtn{
	position: absolute;
	right: 10px;
	display: inline-block;
	text-decoration: none;
	color: #333;
	cursor: pointer;
	height: 39px;
	line-height: 39px;
}
.bigBox .bottomDiv .centerBox{
	width: 100%;
	height: 200px;
	overflow-y: hidden;
	position: relative;
	text-align: center;
}
.bigBox .bottomDiv .centerBox .activeLine{
	position: absolute;
	display: block;
	width: 100%;
	height: 40px;
	top: calc(50% - 20px);
	left: 0px;
	background-color: rgba(0,0,0,0.3);
	z-index: 99;
}
.bigBox .bottomDiv .centerBox .timebox{
	width: 30%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.bigBox .bottomDiv .line{
	display: block;
	text-align: center;
	text-decoration: none;
	color: #333;
	width: 100%;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
}
.swiper-container {
    width: 600px;
    height: 300px;
}

dateMonthYearPicker.js：

;(function($,window,document,undefined){
    var defaults = {
		format: "yyyy-mm-dd",
		startYear: 2000,
		endYear: 2050,
		dateChangeBefore: function(date){

		},
	};
				
	$.fn.extend({
		datePicker: function(options){
			var opts = $.extend(defaults, options);
			return this.each(function(){ 
						//激活事件 
			    var obj = $(this);

			    obj.focus(function(){
					init(obj,opts);
				});

		    });
	    }
					
    });

    function init(obj,opts){
    	var chooDate = obj.val();
    	var todayDate = new Date();

		var chooYear = (chooDate.length>0)?parseInt(chooDate.substring(0,4),10):todayDate.getFullYear();
		var	chooMonth = (chooDate.length>0)?parseInt(chooDate.substring(5,7),10):todayDate.getMonth()+1;
		var	chooDay = (chooDate.length>0)?parseInt(chooDate.substring(8,10),10):todayDate.getDate();

		var year = opts.startYear;
		var	month = "01";
		var	date = "01";

		var mySwiper1,mySwiper2,mySwiper3;

		if($("div.bigBox").length==0){
			var tpl = getTplStr(opts.format);
			$("body").append(tpl);

			setTimeout(function(){
				var height = $(document).height();
				$("div.bigBox").css("height",height);

				if(opts.format.indexOf("yyyy")>-1){
					for (var i=opts.startYear; i<=opts.endYear; i++) {
						var html = "<a class='line swiper-slide'>"+i+"</a>";
						$("#year .year-wrapper").append(html);
					}
				}
				if(opts.format.indexOf("yyyy-mm")>-1){
					for (var i=1; i<13; i++) {
						var n = i;
						if(i<10) n = "0" + i;
						var html = "<a class='line swiper-slide'>"+n+"</a>";
						$("#month .month-wrapper").append(html);
					}
				}
			}, 10);
		}
		setTimeout(function(){
			$("div.bigBox").show(1,function(){
				$("div.bigBox div.bottomDiv").css("bottom","0");
			});

			start();
		}, 15);

		$(document).on("click","#exitBtn",function(){ //取消按钮点击事件
			$("div.bigBox").hide();
			$("div.bigBox div.bottomDiv").css("bottom","-240px");
		});

		$(document).on("click","#trueBtn",function(){ //确认按钮点击事件
			$("div.bigBox").hide();
			$("div.bigBox div.bottomDiv").css("bottom","-240px");

			if(opts.format=="yyyy-mm-dd"){
				var day = year+"-"+month+"-"+date;
			}else if(opts.format=="yyyy-mm"){
				var day = year+"-"+month;
			}else if(opts.format=="yyyy"){
				var day = year;
			}
			obj.val(day);
			opts.dateChangeBefore(day);
		});

		//遮罩层点击事件
		$(document).on("click","div.bigBox",function(e){
			if(e.target.className.indexOf("bigBox")>-1){
				$("div.bigBox").hide();
				$("div.bigBox div.bottomDiv").css("bottom","-240px");
			}
		});

	    function start(){
	    	//date Swiper
	    	if(opts.format=="yyyy-mm-dd"){
				mySwiper3 = new Swiper ('.date-container', {
			    	direction: 'vertical', // 垂直切换选项
			    	wrapperClass : 'date-wrapper',
			    	slidesPerView : 5,
			    	centeredSlides : true,
			    	slideToClickedSlide: true,
			    	on: {
					    slideChangeTransitionEnd: function(){
					    	date = $("div.date-container a.swiper-slide-active").html();
					      	//console.log(date); //切换开始时，告诉我现在是第几个slide
					      	//chooDay = parseInt(date);
					    },
					},
			  	});
		  	}

		  	//year Swiper
		  	if(opts.format.indexOf("yyyy")>-1){
		  		if(mySwiper1){
		  			mySwiper1.removeAllSlides();
		  		}
				mySwiper1 = new Swiper ('.year-container', {
			    	direction: 'vertical', // 垂直切换选项
			    	wrapperClass : 'year-wrapper',
			    	slidesPerView : 5,
			    	centeredSlides : true,
			    	slideToClickedSlide: true,
			    	on: {
					    slideChangeTransitionEnd: function(){
					      	year = $("div.year-container a.swiper-slide-active").html();
					      	//console.log(year); //切换开始时，告诉我现在是第几个slide
					      	updateDateLine(year,month);
					    },
					},
			  	});
			    mySwiper1.updateSlides();
			  	mySwiper1.slideTo(chooYear-opts.startYear);
		  	}

			//month Swiper
			if(opts.format.indexOf("yyyy-mm")>-1){
				if(mySwiper2){
					mySwiper2.removeAllSlides();
				}
			  	mySwiper2 = new Swiper ('.month-container', {
			    	direction: 'vertical', // 垂直切换选项
			    	wrapperClass : 'month-wrapper', //
			    	slidesPerView : 5, //当前窗口显示几条
			    	centeredSlides : true, //设置选中的居中
			    	slideToClickedSlide: true, //开启点击选择位置
			    	on: {
					    slideChangeTransitionEnd: function(){
					    	month = $("div.month-container a.swiper-slide-active").html();
					      	//console.log(month); //切换开始时，告诉我现在是第几个slide
					      	updateDateLine(year,month);
					    },
					},
			  	});
			    mySwiper2.updateSlides();
			  	mySwiper2.slideTo(chooMonth-1);
		  	}
		}

		function updateDateLine(year,month){
			if(opts.format=="yyyy-mm-dd"){
		    	var newMonth = parseInt(month, 10);
			    var date = new Date(year, newMonth, 0);
			    var dateNum = date.getDate(); //当月天数
			   	$("#date .date-wrapper").empty();
			    mySwiper3.removeAllSlides();
			    for(var i=1;i<dateNum+1;i++){
			    	var n = i;
			    	if(i<10) n = "0" + i;
					var html = "<a class='line swiper-slide'>"+n+"</a>";
					$("#date .date-wrapper").append(html);
			    }
			    mySwiper3.updateSlides();
			    //mySwiper3.slideTo(0); //跳转到指定位置

				mySwiper3.slideTo(chooDay-1);
		    }
		}


	    function getTplStr(format){
			var tpl =   '<div class="bigBox">' +
							'<div class="bottomDiv">' +
								'<div class="titleBox">' +
									'<a id="exitBtn" class="exitBtn">取消</a>' +
									'<a id="trueBtn" class="trueBtn">确认</a>' +
								'</div>' +
								'<div class="centerBox">' +
									'<a class="activeLine"></a>';
			if(format.indexOf("yyyy")>-1){
				tpl +=				'<div id="year" class="timebox year-container">' +
										'<div class="year-wrapper">' +
											
										'</div>' +
									'</div>';
			}
			if(format.indexOf("yyyy-mm")>-1){
				tpl +=				'<div id="month" class="timebox month-container">' +
										'<div class="month-wrapper">' +
											
										'</div>' +
									'</div>';
			}
			if(format=="yyyy-mm-dd"){
				tpl +=				'<div id="date" class="timebox date-container">' +
										'<div class="date-wrapper">' +
											
										'</div>' +
									'</div>';
			}
				tpl +=			'</div>' +
							'</div>' +
						'</div>';
			return tpl;
		}

    }
	
})(jQuery,window,document);