码迷,mamicode.com
首页 > 移动开发 > 详细

H5移动端出生日期插件

时间:2015-11-27 17:46:09      阅读:414      评论:0      收藏:0      [点我收藏+]

标签:

现在需要在微信公众号H5页面添加出生日期,如果直接用电脑版的出生日期插件,会显得很土,而且不好用。在网上找了些资料写了个demo,把demo分享给大家。具体效果截图如下:
技术分享
实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

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

    <script src="js/mobiscroll.custom-2.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.6.2.min.css">
    </head>

<body>
      <div >
        出生日期:
         <input type="text"   id="txtBirthday" name="birthday" />
 </div>


<script>  
$(function () {  
var opt = {  
        theme: "android-ics light", 
        display: ‘modal‘, //显示方式  
        lang: "zh",  
        setText: ‘确定‘, //确认按钮名称
        cancelText: "取消",  
        dateFormat: ‘yyyy-mm-dd‘, //返回结果格式化为年月格式  
        dateOrder: ‘yyyymmdd‘, //面板中日期排列格式
        onBeforeShow: function (inst) {
        //  console.info( inst.settings.wheels);
          }, 
        headerText: function (valueText) { //自定义弹出框头部格式  
        //  console.info(valueText);
            array = valueText.split(‘-‘);  
            return array[0] + "年" + array[1] + "月" + array[2] + "日";  
        }  
    };

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

});


</script>  
</body>

</<html>

完整demo的下载地址(免积分):http://download.csdn.net/download/zl544434558/9305769

插件用的是mobiscroll ,样式以及显示内容自己可以参照API调整。

顺便说一下插曲,如果在google的浏览器上访问,“年”那一列会多出一个汉字,比如“2015”会显示“2015年”,我在firefox看是没有这个“年”,但是在google上看有“年”,刚开始还以为mobiscroll不兼容,最后在google的network上发现,当页面加载完成后,google会向后台请求一个翻译连接,这个可能是我装了翻译插件的缘故。没装过翻译插件应该不会出现这种问题。
google的翻译请求截图如下:
技术分享

H5移动端出生日期插件

标签:

原文地址:http://blog.csdn.net/zl544434558/article/details/50072177

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!