mobiscroll插件滑动时间选择效果

最新推荐文章于 2021-07-19 15:00:16 发布

豆趣编程

最新推荐文章于 2021-07-19 15:00:16 发布

阅读量1.1w

点赞数 1

分类专栏：前端文章标签： mobiscroll

本文链接：https://blog.csdn.net/lianzhang861/article/details/80604973

版权

前端专栏收录该内容

61 篇文章 6 订阅

订阅专栏

此插件的特点是可以适用于手机端滑动选择时间，类似于原生插件

下载地址 https://download.csdn.net/download/lianzhang861/10691082

引入css和js

<link rel="stylesheet" href="../js/date/mobiscroll.custom-2.6.2.min.css" />
		<script type="text/javascript" src="../js/date/mobiscroll.custom-2.6.2.min.js" ></script>

html

<input type="text" id="calendarInput">

js配置

var opt={};
	opt.date = {preset : 'date'};
	opt.datetime = {preset : 'datetime'};
	opt.time = {preset : 'time'};
	opt.default = {
		preset: 'date', //日期
		theme: 'android-ics light', //皮肤样式
		display: 'modal', //显示方式 
		mode: 'scroller', //日期选择模式
		dateFormat: 'yyyy-mm-dd',
		dateOrder : 'yyyymmdd', //面板中日期排列格式
		lang: 'zh',
		showNow: true,
		nowText: "今天",
		startYear: currYear - 10, //开始年份
		
		endYear: currYear + 10,//结束年份
		onSelect:function(Value,inst){ //选中时触发事件
			var t=Value.replace(/-/g,"")
			$("#execDate").val(t);
			baseTime=Value
			$("#calendarInput").val(Value.split("-")[1]+"-"+Value.split("-")[2]);
			loadData();
		},
	};

	$("#calendarInput").mobiscroll($.extend(opt['date'], opt['default']));

实例：可复制查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="common/mobiscroll/mobiscroll.custom-2.6.2.min.css" />
		<script type="text/javascript" src="common/mobiscroll/mobiscroll.custom-2.6.2.min.js" ></script>

	</head>
	<body>
		<input type="text" id="calendarInput">
		<script type="text/javascript">
			$(function () {
				var currYear = (new Date()).getFullYear();	
				var currDay = (new Date()).getDate()-1;
				var currMonth = (new Date()).getMonth()+1;
				if(currMonth<10){
					currMonth='0'+currMonth;
				}
				var currdate=currMonth+"-"+currDay
				baseTime=currYear+"-"+currMonth+"-"+currDay;
				
				var lastDay = new Date();//获取当前时间  
				lastDay.setDate(lastDay.getDate()-1);//设置天数 -1 天 
				
				var opt={};
				opt.date = {preset : 'date'};
				opt.datetime = {preset : 'datetime'};
				opt.time = {preset : 'time'};
				opt.default = {
					preset: 'date', //日期
					theme: 'android-ics light', //皮肤样式
					display: 'modal', //显示方式 
					mode: 'scroller', //日期选择模式
					dateFormat: 'yyyy-mm-dd',
					dateOrder : 'yyyymmdd', //面板中日期排列格式
					lang: 'zh',
					showNow: false,
					nowText: "今天",
					maxDate: lastDay, //设置最大可选日期（必须日期格式）
					startYear: currYear - 10, //开始年份
					endYear: currYear + 10,//结束年份
					onSelect:function(Value,inst){ //选中时触发事件
						var t=Value.replace(/-/g,"")
						$("#execDate").val(t);
						baseTime=Value
						$("#calendarInput1").val(Value.split("-")[1]+"-"+Value.split("-")[2]);
					},
				};
			 
				$("#calendarInput").mobiscroll($.extend(opt['date'], opt['default']));
				$("#calendarInput").val(currdate);
				
				$("iframe").height($(window).height());
				
			});

		</script>
	</body>
</html>