前言
比较简单
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;
}
