现在需要在微信公众号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的翻译请求截图如下：
时间： 2024-12-06 12:48:45