H5移动端出生日期插件

最新推荐文章于 2024-08-09 07:00:39 发布

朝着希望前进

最新推荐文章于 2024-08-09 07:00:39 发布

阅读量1.8w

点赞数 2

分类专栏： HTML5 文章标签：出生日期插件移动端 H5

本文链接：https://blog.csdn.net/zl544434558/article/details/50072177

版权

HTML5 专栏收录该内容

5 篇文章 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的翻译请求截图如下：
这里写图片描述
把电脑的外网断掉，用chrome看是正常显示的。