菜单 搜索
首页 前端知识 jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件

jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件

2024-06-11 09:06:54 前端知识 前端哥 242 976 我要收藏

前言

比较简单
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;
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/11933.html
标签
web app
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML5-本地存储浅谈

2024-06-19 08:06:18

html5测试题整理--针对标签的概念性(1)，2024年最新作为一个前端程序员

2024-06-19 08:06:04

302.哆啦A梦动漫主题网页 大学生期末大作业 Web前端网页制作 html5 css js

2024-06-19 08:06:01

【百套源码】HTML5期末大作业 - 各类网页作业源码合集

2024-06-19 08:06:36

JS实现倒计时功能

2024-06-19 08:06:34

基于html小说网站的设计与实现(源码 开题)

2024-06-19 08:06:23

Web实训项目--网页设计（附源码）

2024-06-19 08:06:13

html实现好看的个人介绍，个人主页模板5(附源码)

2024-01-25 11:01:54

HTML黑客帝国字母雨

2024-06-11 09:06:45

每天一篇之HTML(2)

2024-06-19 08:06:26

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！