注册
登录

您现在的位置是：首页 > 学无止境

移动端日期控件

木木彡82 2015-05-03 18:02:23 共1366人围观
其它
转载自：http://www.cnblogs.com/luckythan/p/4470720.html?utm_source=tuicool

最近在写微信端的页面，要用到日期控件，得知其内置浏览器支持HTML5的时候，我笑了(so easy~)，两秒钟搞定。然后找了三种机型，你是不是猜到了已...

转载自：http://www.cnblogs.com/luckythan/p/4470720.html?utm_source=tuicool

最近在写微信端的页面，要用到日期控件，得知其内置浏览器支持HTML5的时候，我笑了(so easy~)，<input type="date" />两秒钟搞定。然后找了三种机型，你是不是猜到了已经？！没错，Android，iPhone，winphone，，，奇葩的winphone内置浏览器竟然是IE。醉了，疯狂搜索，找到一篇博客mobiscroll，照着敲下来都达不到人家的效果，搞了半天，终于，，，实现了哈哈。

　　说到这，有人就要骂了，你傻逼啊，为啥不用jquery  mobile呢？呵呵，当你想选择25号的时候，你等到26号去选了（太卡，直接pass）

　　上边这俩也太丑了，官网有更好看的~

　　下面开始跟人家做吧：

第一步：到官网去下载个压缩包，下载需要先注册然后才能下载。下载的时候你可以选择你使用的框架及皮肤样式等，看下图

到此假设你已经成功注册并下载啦

第二步、新建一个HTML5文件，引jquery.js,jquerymobile.js 等等（等等是什么鬼？）必须的文件，编写如下代码到你的文件中：

<div data-role="fieldcontain">
         <label for="txtBirthday">出生日期：</label>
         <input type="text" data-role="datebox"   id="txtBirthday" name="birthday" />
 </div>
我们可以这样去初始化日期控件：

$('input:jqmData(role="datebox")').mobiscroll().date();
预览下吧，是不是可以使用了呢！唯独这个界面是英文的，对于国人来说多少有点不爽，而官网又没有提供中文语言包，但没有关系，官网的API还是不错的，我们可以设置一些常用的属性使之符合常规的日期格式。
//初始化日期控件
    var opt = {
        preset: 'date', //日期
        theme: 'jqm', //皮肤样式
        display: 'modal', //显示方式 
        mode: 'clickpick', //日期选择模式
        dateFormat: 'yy-mm-dd', // 日期格式
        setText: '确定', //确认按钮名称
        cancelText: '取消',//取消按钮名籍我
        dateOrder: 'yymmdd', //面板中日期排列格式
        dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
        endYear:2020 //结束年份
    };
    
    $('input:jqmData(role="datebox")').mobiscroll(opt);

这样就OK啦 看下效果图吧

到这如果你跟我一样的智商，没写出来。。。就继续看下面的吧。。。(最烦那些不把所有代码贴出来的博客了)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <title>mobiscroll-中文-日期选择</title>
        <link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
        <link href="css/mobiscroll.frame.android-holo.css" rel="stylesheet" type="text/css" />
        <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
        <link href="css/mobiscroll.android-holo-light.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div style="text-align: center;">
            <label for="date">mobiscroll-中文-日期选择</label><br />
            <input type="text" id="date" />  
        </div>
        
        <script src="js/zepto.min.js"></script>
        <script src="js/mobiscroll.zepto.js"></script>
        <script src="js/mobiscroll.core.js"></script>
        <script src="js/mobiscroll.frame.js"></script>
        <script src="js/mobiscroll.scroller.js"></script>
        <script src="js/mobiscroll.util.datetime.js"></script>
        <script src="js/mobiscroll.datetimebase.js"></script>
        <script src="js/mobiscroll.datetime.js"></script>
        <script src="js/mobiscroll.android-holo-light.js"></script>
        <script src="js/i18n/mobiscroll.i18n.zh.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#date').mobiscroll().date({
                    theme: "android-holo-light",     
                    mode: "scroller",       
                    display: "bottom",
                    lang: "zh"        
                });
            });
        </script>
    </body>
</html>

卧槽这么多文件，你让我去哪下载啊，，别急别急。。。在这儿呢。。。

　　戳 =》我


上一篇：RESTful API 设计最佳实践

下一篇：浅谈js之事件处理

相关文章

文章评论

  • 登录后评论

点击排行