手机触摸板 日期选择控件整理

1:首先引用js文件:

 <!--时间控件样式-->
    <link rel="stylesheet" type="text/css" href="~/Theme/css/mobiscroll.custom-2.13.2.min.css">
  <!--时间控件mobiscroll-->
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>


    <link href="~/Theme/plugins/mobiscroll/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
    <link href="~/Theme/plugins/mobiscroll/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
    <script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

   //选择时间
        function selectDatetime() {
            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', //日期选择模式
                lang: 'zh',
                startYear: currYear - 10, //开始年份
                endYear: currYear + 10 //结束年份
            };

            //$("#ApptDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
            var optDateTime = $.extend(opt['datetime'], opt['default']);
            //var optTime = $.extend(opt['time'], opt['default']); 
            $("#ApptDate").mobiscroll(optDateTime).datetime(optDateTime);
            //$("#ApptDate").mobiscroll(optTime).time(optTime);
        }


2:前台html代码:

<input type="text" id="ApptDate" />

效果图:


android和iphone显示的是不一样的效果

css和js地址:百度盘点击下载

大家觉得好就给一个回复吧!谢谢!

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值