H5移动端出生日期插件

来源：互联网发布：不动产数据库标准编辑：程序博客网时间：2024/06/06 05:35

现在需要在微信公众号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看是正常显示的。

2 0