Mobiscroll移动端日期控件_触屏滑动日期选择代码



168 671 224



特效描述:Mobiscroll 移动端日期控件 触屏滑动 日期选择代码,Mobiscroll移动端日期控件,方便操作,支持各种格式的时间和定制功能

代码结构

1. 引入CSS

<link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
<link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery.1.7.2.min.js"></script>
<script src="js/mobiscroll_002.js" type="text/javascript"></script>
<script src="js/mobiscroll_004.js" type="text/javascript"></script>
<script src="js/mobiscroll.js" type="text/javascript"></script>
<script src="js/mobiscroll_003.js" type="text/javascript"></script>
<script src="js/mobiscroll_005.js" type="text/javascript"></script>

3. HTML代码

    <div class="header">
        <h1>Mobiscroll精简实例</h1>
    </div>
    <div class="content">
		<div class="demos">
			<label for="appDate">日期</label>
			<input value="" class="" readonly="readonly" name="appDate" id="appDate" type="text">
		</div>
		<div class="demos">
			<label for="appDateTime">日期时间</label>
			<input value="2015-05-01 15:42:02" class="" readonly="readonly" name="appDateTime" id="appDateTime" type="text">
		</div>
		<div class="demos">
			<label for="appTime">时间</label>
			<input value="16:43" class="" readonly="readonly" name="appTime" id="appTime" type="text">
		</div>
	</div>
	<script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};
		  	$("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
        });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 滑动导航菜单 右键菜单 时间轴 滑动选项卡切换 文字提示框 日历选择器 图片滑动 提示框/弹出层 时间日期插件 文字滑动 layer 滑动手风琴 lightbox 滑动星星打分 Tooltip工具提示框 浮动提示框 html5弹窗动画 滑动滑过 弹出层拖动 窗口提示框 日历日期时间

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到