jQuery手机端mobiscroll时间选择插件


jQuery手机端mobiscroll时间选择插件
jQuery手机端mobiscroll时间选择插件以及手机端mobiscroll、时间选择等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/mobiscroll2.js"></script>

3. HTML代码

        <!-- 选择时间 -->
        <div>
            时间选择:<br>
		    <input type="text" id="timeSel" value="2019-10-28 11:01" class="" placeholder="Please Select ..." readonly>
        </div>
        <!-- 列表选择 -->
        <div>
            列表选择:<br>
		    <input type="text" id="listSel" value="" class="" placeholder="Please Select ..." readonly>
        </div>
        <script type="text/javascript">
			$(function(){
                $('#timeSel').mobiscroll().datetime({
                    theme: 'ios', //皮肤样式
                    display: 'bottom', //对齐
                    mode: 'scroller', //日期选择模式:弹出
                    lang: 'zh',         //语言
                    dateFormat: 'yy-MM-dd HH:mm', // 日期格式
                    setText: '确定', //确认按钮名称
                    cancelText: '取消',//取消按钮名籍我
                    showLabel : false,   //显示头信息
                    headerText: '时间',
                    height: 40,
                    max: new Date('2050-12-30 23:59:59'),
                    min: new Date('2014-01-01 00:00:00')
                });
                $("#listSel").mobiscroll().select({
                    theme: 'ios', //皮肤样式
                    display: 'bottom', //对齐
                    mode: 'scroller', //选择模式:弹出
                    lang: 'zh',
                    data: [
                        {value:0, text:'交钥匙'},
                        {value:1, text:'入住'},
                        {value:2, text:'拆旧'}
                    ],
                    defaultValue: 2,
                    setText: '确定', //确认按钮名称
                    cancelText: '取消',//取消按钮名籍我
                    showLabel: false,
                    headerText: '姓名',
                    onSet: function (event, inst) {
                        console.log(event.valueText);//选定的text值
                        // console.log(inst.getVal()); //选定的value值
                        // $('#listSel').mobiscroll('hide');
                    },
                    onClose: function (event, inst) {
                        // $('#listSel').mobiscroll('hide');
                    }
                });
			});
			/*$(document).on('click','#addbtn',function () {
				$('#listUnordered-demo').mobiscroll('show');
				return false;
			});*/
        </script>

相关推荐

发表评论

相关文章