前言
比较简单
H5移动端日期组件，使用的是MUI官方JS组件，因为不想自己写一个所以直接拿来改动一下用了
效果图
实现
准备工作
到官网下载css和js：https://dev.dcloud.net.cn/mui/
到官网查看API：https://dev.dcloud.net.cn/mui/ui/#picker
也可以在HBuilder中右键创建App项目中选择，日期例子官方都带有的
示例
下载下来的mui只需要下面引入的几个文件即可，我这里组合了jQuery使用
mui.min.css不建议引入，因为会替换自己项目上的样式
注：其实下面每个点击事件调用都是一样的，可以写成一个方法共用，传入参数设置和回调返回选中的值即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!--这里防止mui的表单一系列样式覆盖项目的，可以不引入--> <!--<link rel="stylesheet" type="text/css" href="mui/css/mui.min.css">--> <link rel="stylesheet" type="text/css" href="mui/css/mui.picker.min.css" /> <link rel="stylesheet" type="text/css" href="mui/css/mui.dtpicker.css" /> <!-- 注：这一部分样式是我自己定义的，可要可不要（要的话，建议放到mui.dtpicker.css里面）--> <style> .mui-btn { font-size: 14px; font-weight: 400; position: relative; display: inline-block; margin-bottom: 0; padding: 6px 12px; cursor: pointer; -webkit-transition: all; transition: all; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: .2s; transition-duration: .2s; text-align: center; color: #333; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; } .mui-btn-block { width: 100%; margin-top: 10px; font-size: 18px; } .mui-backdrop { position: fixed; z-index: 99999999; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .3); } .mui-dtpicker { border: none; z-index: 999999999; } .mui-dtpicker, .mui-poppicker { background-color: #fff; box-shadow: 0 -2px 5px 0 rgb(0 0 0 / 10%); /*border-radius: 20px 20px 0px 0px;*/ } /** 调节选择数字的背景*/ .mui-picker { /*background-color: #ededed;*/ background-color: #fff; } /** 年月日...标题*/ .mui-dtpicker-title h5 { border: none; background-color: #f3f3f3; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mui-dtpicker-title { font-size: 14px; font-weight: 400; color: #8f8f94; } .mui-dtpicker-header { padding: 10px; } .mui-dtpicker-header button { border-radius: 4px; } .mui-btn-blue, .mui-btn-primary{ color: #fff; border: 1px solid #4c7bff; background-color: #4c7bff; } .mui-pciker-rule-ft { border-top: solid 1px rgb(90 90 90 / 10%); border-bottom: solid 1px rgb(90 90 90 / 10%); } </style> </head> <body> <button id='demo1' data-options='{"type":"year"}' class="mui-btn mui-btn-block">选择年份 ...</button> <button id='demo2' data-options='{"type":"month"}' class="mui-btn mui-btn-block">选择月份 ...</button> <button id='demo3' data-options='{"type":"date"}' class="mui-btn mui-btn-block">选择日期 ...</button> <button id='demo4' data-options='{"type":"datetime"}' class="mui-btn mui-btn-block">选择日期时间 ...</button> <button id='demo5' data-options='{"type":"time"}' class="mui-btn mui-btn-block">选择时间 ...</button> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="mui/js/mui.min.js"></script> <script type="text/javascript" src="mui/js/mui.picker.min.js"></script> <!-- 引入这个主要是要用自己定义的年份--> <script type="text/javascript" src="mui/js/mui.dtpicker.js"></script> <script> $(function() { // 点击选择日期 $("#demo1").click(function() { // 固定属性设置 var options = {}; options.type = 'year'; options.beginYear = 2010; // 开始年份 options.endYear = 2050; // 结束年份 //options.beginDate = new Date(2010, 1, 1); // 设置开始日期 //options.endDate = new Date(2050, 1, 1); // 设置结束日期 //options.labels = ['年'] // ['年', '月', '日'] var picker = new mui.DtPicker(options); //picker.setSelectedValue('2025-05-05 05:55');// 设置默认值（源码里没有，这里是博客直接加的） picker.show(function(rs) { console.log('选择结果: ' + rs.text); picker.dispose(); picker = null; }); }) // 点击选择月份 $("#demo2").click(function() { // 这是获取标签上设置的，或者可以像上面一样js直接设置死 var optionsJson = $(this).attr('data-options') || '{}'; var options = JSON.parse(optionsJson); var picker = new mui.DtPicker(options); picker.show(function(rs) { console.log('选择结果: ' + rs.text); picker.dispose(); picker = null; }); }) // 点击选择日期 $("#demo3").click(function() { var optionsJson = $(this).attr('data-options') || '{}'; var options = JSON.parse(optionsJson); var picker = new mui.DtPicker(options); picker.show(function(rs) { console.log('选择结果: ' + rs.text); picker.dispose(); picker = null; }); }) // 点击选择日期时间 $("#demo4").click(function() { var optionsJson = $(this).attr('data-options') || '{}'; var options = JSON.parse(optionsJson); var picker = new mui.DtPicker(options); picker.show(function(rs) { console.log('选择结果: ' + rs.text); picker.dispose(); picker = null; }); }) // 点击选择时间 $("#demo5").click(function() { var optionsJson = $(this).attr('data-options') || '{}'; var options = JSON.parse(optionsJson); var picker = new mui.DtPicker(options); picker.show(function(rs) { console.log('选择结果: ' + rs.text); picker.dispose(); picker = null; }); }) }) </script> </body> </html>
本示例代码
链接: https://pan.baidu.com/s/1qkIUabspNCyzIKMwjtsKzQ 提取码: vm72
注意
官方日期是没有带年份选择的，如果不是使用本示例代码的话，需要自己去改文件
修改一 mui.dtpicker.js文件
打开mui.dtpicker.js，并找到如下位置，像图片中将年份校验添上
case 'year': selected.value = selected.y.value; selected.text = selected.y.text; break;
修改二 mui.dtpicker.css文件
打开mui.dtpicker.css文件，拉到最底部，将如下样式复制过去即可
/*年*/ [data-type="year"] .mui-picker, [data-type="year"] .mui-dtpicker-title h5 { width: 100%; } [data-type="year"] [data-id="picker-m"], [data-type="year"] [data-id="picker-d"], [data-type="year"] [data-id="picker-h"], [data-type="year"] [data-id="picker-i"], [data-type="year"] [data-id="title-m"], [data-type="year"] [data-id="title-d"], [data-type="year"] [data-id="title-h"], [data-type="year"] [data-id="title-i"] { display: none; }
修改三 兼容iOS苹果
日期选择在苹果中是乱的，需要在使用页面或者mui.dtpicker.css中加入如下
/** 兼容苹果*/ @supports (font-variant-alternates: styleset(nice-style)) { .mui-pciker-list { transform-origin-z: 0 !important; } }
修改四 移动端下感觉太短小了导致不好滑动，可以调高一点
放到mui.dtpicker.css中即可
.mui-dtpicker { transform: translateY(400px); -webkit-transform: translateY(400px); } .mui-dtpicker-body { height: 300px; } .mui-android-5-1 .mui-dtpicker { bottom: -400px; }
