mobiscroll插件滑动时间选择效果


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

引入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']));



猜你喜欢

转载自blog.csdn.net/lianzhang861/article/details/80604973