• 移动端日期控件rolldate

    在这里插入图片描述

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
  • 相关阅读:
    Linux进程的调度
    客户端实现client.go客户端类型定义连接
    Python可视化必备，在Matplotlib/Seaborn中轻松玩转图形拼接！
    牛客小白月赛#59(A~F)
    软件测试面试会问哪些问题？
    深度解析：为何在 SwiftUI 视图的 init 初始化器里无法更改 @State 的值？
    Redis（五）整合：SpringBoot如何整合Redis？
    JAVA项目点赞功能如何实现?如何利用缓存优化？如何防止刷赞?
    DAC实验(DAC 输出三角波实验)(DAC 输出正弦波实验)
    剑指offer 39. 数字排列
  • 原文地址：https://blog.csdn.net/weixin_43506403/article/details/125562573