移动端日期控件rolldate

最新推荐文章于 2024-06-03 16:37:04 发布
最新推荐文章于 2024-06-03 16:37:04 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 移动端 日期控件 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43506403/article/details/125562573
版权

在这里插入图片描述

<html lang="zh-cn"><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>rolldate demo</title>
	<!-- bootstrap.css仅作为示例演示使用 -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		h1 {
			font-size: 30px;
		}

		.form-control[readonly] {
			background: none;
		}

		@media(max-width: 414px) {
			.form-control {
				font-size: 12px;
			}
		}

		@media(max-width: 360px) {
			.form-control {
				font-size: 10px;
				padding: 0 5px;
			}
		}

		@media(max-width: 320px) {
			.col-xs-6 {
				padding: 0 5px;
			}
		}
	</style>
<style type="text/css">ul{margin:0;padding:0}li{list-style-type:none}.rolldate-container{font-size:20px;color:#333;text-align:center}.rolldate-container header{position:relative;line-height:60px;font-size:18px;border-bottom:1px solid #e0e0e0}.rolldate-container .rolldate-mask{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:rgba(37,38,45,.4)}.rolldate-container .rolldate-panel{position:fixed;bottom:0;left:0;width:100%;height:273px;z-index:1000;background:#fff;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}.rolldate-container .rolldate-btn{position:absolute;left:0;top:0;height:100%;padding:0 15px;color:#666;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.rolldate-container.wx .rolldate-btn{height:150%}.rolldate-container .rolldate-confirm{left:auto;right:0;color:#007bff}.rolldate-container .rolldate-content{position:relative;top:20px}.rolldate-container .rolldate-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.rolldate-container .rolldate-wrapper>div{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:173px;line-height:36px;overflow:hidden;-webkit-flex-basis:-8e;-ms-flex-preferred-size:-8e;flex-basis:-8e;width:1%}.rolldate-container .rolldate-wrapper ul{margin-top:68px}.rolldate-container .rolldate-wrapper li{height:36px}.rolldate-container .rolldate-dim{position:absolute;left:0;top:0;width:100%;height:68px;background:-o-linear-gradient(bottom,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:-webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));background:-o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));background:linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:10}.rolldate-container .mask-top{border-bottom:1px solid #ebebeb}.rolldate-container .mask-bottom{top:auto;bottom:1px;border-top:1px solid #ebebeb}.rolldate-container .fadeIn{-webkit-transform:translateZ(0);transform:translateZ(0)}.rolldate-container .fadeOut{-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}@media screen and (max-width:414px){.rolldate-container{font-size:18px}}@media screen and (max-width:320px){.rolldate-container{font-size:15px}}</style></head>

<body>
	<div class="jumbotron">
		<div class="container">
			<h1>rolldate 多格式、功能强大的移动端日期选择插件</h1>
			<p>此为rolldate 3.0新版，使用better-scroll替换了iscroll,旧版请点击
				<a href="https://weijhfly.github.io/rolldate-index2.html">返回旧版</a></p>
		</div>
	</div>
	<div class="container">
		<h4><strong>支持格式：(无限制)</strong></h4>
		<p><strong>规则：年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可以随意组合，不建议单个重复</strong></p>
		<p>例：YYYY-MM、YYYY-MM-DD、YYYY-MM-DD hh:mm、YYYY-MM-DD hh:mm:ss、YYYY、MM、DD、hh:mm、hh:mm:ss、YYYY-MM-DD hh、hh、mm、ss、YYYY/DD...</p>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-1" placeholder="YYYY-MM">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-2" placeholder="YYYY-MM-DD">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-3" placeholder="YYYY-MM-DD hh">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-4" placeholder="YYYY-MM-DD hh:mm">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-5" placeholder="YYYY-MM-DD hh:mm:ss">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-6" placeholder="hh:mm">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-7" placeholder="hh:mm:ss">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-8" placeholder="YYYY">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-9" placeholder="MM">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-10" placeholder="DD">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-11" placeholder="hh">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-12" placeholder="mm">
				</div>
			</div>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-13" placeholder="ss">
				</div>
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group1-14" placeholder="YYYY/DD">
				</div>
			</div>
		</div>

		<h4><strong>回调函数：</strong></h4>
		<p>init、moveEnd、confirm、cancel</p>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group2-1" placeholder="完整实例">
				</div>
			</div>
			<h5 class="col-xs-12">init return false可阻止插件运行</h5>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group2-2" placeholder="init">
				</div>
			</div>
			<h5 class="col-xs-12">confirm return false阻止插件运行,return其他值可以修改日期展示</h5>
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group2-3" placeholder="confirm修改日期">
				</div>
			</div>
		</div>

		<h4><strong>自定义语言</strong></h4>
		<p>lang</p>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group3-1" placeholder="lang">
				</div>
			</div>
		</div>

		<h4><strong>设置默认日期</strong></h4>
		<p>value</p>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group4-1" placeholder="设置默认日期">
				</div>
			</div>
		</div>

		<h4><strong>el传dom对象</strong></h4>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group5-1" placeholder="el传dom对象">
				</div>
			</div>
		</div>

		<h4><strong>分钟间隔</strong></h4>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group6-1" placeholder="分钟间隔5">
				</div>
			</div>
		</div>
		<h4><strong>使用原生click</strong></h4>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group7-1" placeholder="trigger:'click'">
				</div>
			</div>
		</div>
		<h4><strong>不传el</strong></h4>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group9-1" placeholder="不传el">
				</div>
			</div>
		</div>
		<h4><strong>其他示例</strong></h4>
		<div class="row">
			<div class="form-group clearfix">
				<div class="col-xs-6">
					<input readonly="" class="form-control" type="text" id="date-group8-1" placeholder="不能小于当前的日期">
				</div>
			</div>
		</div>
	</div>
	<script>
		window.onload = function() {

			// 格式
			new Rolldate({
				el: '#date-group1-1',
				format: 'YYYY-MM',
				beginYear: 2000,
				endYear: 2100
			})
			new Rolldate({
				el: '#date-group1-2',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100
			})
			new Rolldate({
				el: '#date-group1-3',
				format: 'YYYY-MM-DD hh'
			})
			new Rolldate({
				el: '#date-group1-4',
				format: 'YYYY-MM-DD hh:mm',
				beginYear: 2000,
				endYear: 2100
			})
			new Rolldate({
				el: '#date-group1-5',
				format: 'YYYY-MM-DD hh:mm:ss',
				beginYear: 2000,
				endYear: 2100
			})
			new Rolldate({
				el: '#date-group1-6',
				format: 'hh:mm'
			})
			new Rolldate({
				el: '#date-group1-7',
				format: 'hh:mm:ss'
			})
			new Rolldate({
				el: '#date-group1-8',
				format: 'YYYY',
				beginYear: 2000,
				endYear: 2100
			})
			new Rolldate({
				el: '#date-group1-9',
				format: 'MM'
			})
			new Rolldate({
				el: '#date-group1-10',
				format: 'DD'
			})
			new Rolldate({
				el: '#date-group1-11',
				format: 'hh'
			})
			new Rolldate({
				el: '#date-group1-12',
				format: 'mm'
			})
			new Rolldate({
				el: '#date-group1-13',
				format: 'ss'
			})
			new Rolldate({
				el: '#date-group1-14',
				format: 'YYYY/DD'
			})
			/* 回调函数
			 * tips:	在vue及其他mvvm框架中使用时，在confirm中修改v-model绑定的数据即可
			 */
			new Rolldate({
				el: '#date-group2-1',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				init: function() {
					console.log('插件开始触发');
				},
				moveEnd: function(scroll) {
					console.log(scroll)
					console.log('滚动结束');
				},
				confirm: function(date) {
					console.log(date)
					console.log('确定按钮触发');
				},
				cancel: function() {
					console.log('插件运行取消');
				}
			})
			new Rolldate({
				el: '#date-group2-2',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				init: function() {
					if (1 == 1) {
						console.log('阻止插件继续执行');
						return false;
					}
				}
			})
			new Rolldate({
				el: '#date-group2-3',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				confirm: function(date) {
					return date.replace(/-/g, '/');
				}
			})
			// 自定义语言
			var lang = {
				title: '自定义标题',
				cancel: '取消',
				confirm: '确认',
				year: '年',
				month: '月',
				day: '日',
				hour: '时',
				min: '分',
				sec: '秒'
			};
			// 如果某个值未修改可不传 以上同 var lang = {title:'自定义标题'} 允许传空串
			new Rolldate({
				el: '#date-group3-1',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				lang: lang
			})

			// 设置默认日期 内部使用document.getElementById('date').bindDate = new Date('2019/05/13');
			new Rolldate({
				el: '#date-group4-1',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				value: '2017-10-21' //或2017-10-21 23:52:50
			})

			// el传dom对象，只支持单个
			new Rolldate({
				el: document.getElementById('date-group5-1'),
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100
			})

			// 分钟按指定数分隔
			new Rolldate({
				el: '#date-group6-1',
				format: 'hh:mm',
				minStep: 5
			})
			// 使用原生click
			new Rolldate({
				el: '#date-group7-1',
				trigger: 'click'
			})
			// 不传el
			var el = document.getElementById('date-group9-1');
			el.addEventListener('click', function() {
				rd.show();
			})
			var rd = new Rolldate({
				confirm: function(date) {
					el.value = date;
				}
			})

			// 其他示例
			//日期判断
			new Rolldate({
				el: '#date-group8-1',
				format: 'YYYY-MM-DD',
				beginYear: 2000,
				endYear: 2100,
				confirm: function(date) {
					var d = new Date(),
						d1 = new Date(date.replace(/\-/g, "\/")),
						d2 = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()); //如果非'YYYY-MM-DD'格式，需要另做调整

					if (d1 < d2) {
						alert('不能小于当前的日期');
						return false;
					}
				}
			})
		}
	</script>
<script type="text/javascript" src="rolldate.min.js"></script>

</body></html>
白鹭凡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery移动端时间控件
05-06
移动端时间控件，年月日选择，时分秒选择，年月日时分秒选择，满足三种不同的需求。
手机端时间选择控件
12-15
两款可以在手机端使用的时间选择控件 可以精确到时分秒
基于uni-app的 年-月-日 时 时间日期范围控件
最新发布
wangweiruning的博客
06-03 1163
一个使用 uni-app 开发的日期时间选择器组件，它包含了一个遮罩层（pickerMask）和一个日期时间选择器弹窗（picker-box这个组件允许用户选择一个时间范围，包括年、月、日和小时。
jQuery移动端触屏滑动日期控件(mobiscroll时间控件)Demo
05-09
此Demo是jQuery移动端触屏滑动日期控件(mobiscroll时间控件，也支持PC端)，引用起来十分简单，功能强大，使用便捷.
rolldate移动端多功能时间选择插件.rar
03-31
rolldate移动端多功能时间选择插件，支持格式：(无限制)规则：年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可以随意组合，不建议单个重复例：YYYY-MM、YYYY-MM-DD、YYYY-MM-DD hh:mm等
支持手机页面、web页面的时间日期控件
07-17
兼容Android、ios、web网页的日期时间控件兼容Android、ios、web网页的日期时间控件兼容Android、ios、web网页的日期时间控件
移动端日期插件rolldate
热门推荐
雾空
08-04 1万+
rolldate为上一版jquery移动端时间插件的全新版本，目前保留了上一版的大部分功能，并且增加了回调函数，以及主题风格选取，最重要的是解决了上一版本的遗留问题，依赖jquery、滑动不够流畅、参数设计不够合理等等。 开发日期选择插件的原因，一是基于移动端设计的日期选择插件确实不多，二是大多支持的日期格式不够丰富，也不够灵活，这在多变的项目需求中，无疑是捉襟见肘的。 rolldate效...
rolldate【选择时间】
m0_55546349的博客
01-10 902
rolldate【选择时间】
jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件
weixin_43992507的博客
05-06 1514
jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件
安卓：表示日期的控件
A125679880的博客
07-17 6668
DatePicker是一种安卓平台上常用的控件，用于让用户选择日期。它通常以日历的形式显示，并允许用户通过滑动或点击来选择年、月和日。
记一次移动端封装自定义时间选择控件
u014165391的博客
12-02 695
近期在做一个移动端项目，遇到一个自定义选择时间控件的需求；具体要实现的交互逻辑如下：1. 预约下单的时候必须大于当前系统时间30分后，选择时间按照24小时制，分钟按照每隔15分钟进行显示（例如：15、30、45、00）；2. 如当前时间为14点30分，此时预约时间只能大于15点之后的时间用车（包含15点整）;3. 如当前系统时间为14点31分，此时预约时间只能大于15点整之后的时候用车（不包含15点整）;
移动端日期和时间选择控件lCalendar-master.zip
05-05
移动端日期和时间选择控件lCalendar-master，可供学习设计参考。
js移动端日期时间选择控件
12-28
`js移动端日期时间选择控件` 是一种常见的交互元素，它允许用户方便地选取日期和时间，提高用户体验。在JavaScript（特别是原生JS）中，我们可以创建自定义的日期时间选择器，或者利用现有的开源库来实现这一功能。 ...
移动端日期时间选择控件
02-18
在移动端应用开发中，日期时间选择控件是一个非常常见的组件，它允许用户方便地选取日期和时间，广泛应用于各种场景，如预约、日程安排、表单填写等。本话题将深入探讨移动端日期时间选择控件的设计原理、实现方式...
移动端-手机端-日历选择控件（支持Zepto和JQuery）
xiaozhen0610的博客
08-28 1544
一. 效果图 二. 功能说明 　　1. 支持切换年份，月份。 　　2. 支持点击选中日期，也可以点击确定选择日期。 三. 使用方法 　　1. 添加Input 　　在你的页面中添加Input输入框。可以再html里，也可以JS动态加载。 　　我这里使用的时Input-group形式的输入框，是JS加载的。 　　一般使用的话，直接写个input输入框就行。 <div class="item item-buydate input-group"> <span class="inpu.
js 移动端 日期选择底部弹出插件
jinse29的博客
11-16 2661
先放一张效果图,没用使用框架,H5原生实现 插件是我在网上找的,叫Mdate.js 这是下载地址https://download.csdn.net/download/jinse29/43001045 使用非常简单,看下面代码 <input type="text" id="dateSelectorStart" placeholder="选择日期"> <script src="../lib/Mdate/iScroll.js"></script> <sc
移动端年、月、周、日时间选择器（基于Vant+Vue3）
weixin_44217374的博客
12-04 2223
开发移动app项目时，需要选择年、月、周、日下面的具体时间范围，比如年：xxxx年01月01日至xxxx年12月31日；月：当前年加上选择的月份的日期范围；周：当前年的某一周的时间范围；日期：当前年+当前月份+选择的日期；于是封装了个组件,用的是vant组件库。先安装组件库依赖npm i vant。
移动端时间范围选择
dudu_yeye的博客
11-30 1300
移动端可滑动时间选择
推荐项目：Rolldate - 简单易用的时间处理库
gitblog_00021的博客
03-27 273
推荐项目：Rolldate - 简单易用的时间处理库 项目地址:https://gitcode.com/weijhfly/rolldate 项目简介 在编程中，处理日期和时间是一项常见的任务，Rolldate 是一个专为 Python 设计的轻量级库，它提供了一套简单而直观的接口，用于对日期进行各种操作。无论你是新手还是经验丰富的开发者，Rolldate 都可以让你的时间处理工作变得更轻松。 技术...
vue移动端时间控件
08-18
要在Vue移动端使用时间控件，可以按照以下步骤进行操作： 第一步：在main.js中引入时间控件的js文件。例如，可以使用import语句将datePicker.js文件引入进来，路径自己设置。然后使用Vue.use(datePicker)将该控件注册为Vue插件。 [3] 第二步：在你的.vue文件中，可以使用mounted()方法来加载日期选择控件。在这个方法中，调用datePicker()方法来初始化日期选择器。你可以根据需求自定义控件的触发器、模式、最小日期、最大日期等参数。在onSubmit事件中，你可以获取选择的日期值。在onClose事件中，可以处理取消选择的逻辑。 [2] 通过以上步骤，你就可以在Vue移动端中使用时间控件了。记得根据自己的实际情况调整代码路径和参数配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-video:vue移动端简单自定义控件播放器](https://download.csdn.net/download/weixin_42178963/18654840)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue移动端日期选择器（datepicker.js）](https://blog.csdn.net/weixin_44979432/article/details/105815821)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值