头像

适合移动应用的日期时间拾取器

来源:http://school.sxbd100.com/html5/32.html 代码交流管理员 2016-09-10浏览(909)

这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了友好的日期和时间选择操作界面,且易于配置和使用。

程序员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

适合移动应用的日期时间拾取器
分类:首页>>网页特效>>html5 阅读次数:910
查看演示 下载次数: 4

手机扫码访问:

下载资源 下载积分: 10

  HTML

  首先我们加载相关插件和样式文件,该插件基于jQuery和jQuery.mobile所以首先需要加载这两个库文件,然后再加载mobiscroll.js插件以及相关CSS文件。

    <script src="js/jquery.min.js"></script> 

    <script src="js/jquery.mobile-1.3.0.min.js"></script> 

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

    <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> 

    

  JavaScript

  mobiscroll提供了许多选项可以设置,包括定义弹出面板展示方式、最大日期、最小日期、日期格式、结束年份等,也可以将插件本地化,包括设置中文按钮、说明。调用也非常简单,以下是示例代码:

    $(function(){ 

        var opt = { 

            preset: 'date', //日期 

            theme: 'sense-ui', //皮肤样式 

            display: 'modal', //显示方式  

            mode: 'scroller', //日期选择模式 

            dateFormat: 'yy-mm-dd', // 日期格式 

            setText: '确定', //确认按钮名称 

            cancelText: '取消',//取消按钮名籍我 

            dateOrder: 'yymmdd', //面板中日期排列格式 

            dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 

            hourText: '时',minuteText: "分",ampmText:"上午/下午", 

            endYear:2020 //结束年份 

        }; 

        $("#date").mobiscroll().date(opt); 

    }); 


标签: 日期拾取器
声明:本文为原创文章,如需转载,请注明来源school.sxbd100.com并保留原文链接:http://school.sxbd100.com/html5/32.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>