foreword
Relatively simple
H5 mobile date component, using the official MUI JS component, because I don’t want to write one myself, so I just used it to modify it
renderings
accomplish
Preparation
Go to the official website to download css and js: https://dev.dcloud.net.cn/mui/
Go to the official website to view the API: https://dev.dcloud.net.cn/mui/ui/#picker
You can also right click in HBuilder Select in the creation of App project, and the date example is officially included
example
The downloaded mui only needs a few files imported below. I combined jQuery here and use
mui.min.css. It is not recommended to import , because it will replace the style on your own project.
Note : In fact, every click event call below is the same Yes, it can be written as a common method, just pass in parameter settings and callback to return the selected value
<!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>
This sample code
Link: https://pan.baidu.com/s/1qkIUabspNCyzIKMwjtsKzQ Extraction code: vm72
Notice
The official date does not have a year option, if you do not use this sample code, you need to modify the file yourself
Modify a mui.dtpicker.js file
Open mui.dtpicker.js, and find the following location, add the year check as in the picture
case 'year':
selected.value = selected.y.value;
selected.text = selected.y.text;
break;
Modify the second mui.dtpicker.css file
Open the mui.dtpicker.css file, pull it to the bottom, and copy the following styles over
/*年*/
[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;
}