マルチフォーマットの強力なモバイル日付選択プラグイン

プログラミング 2023-10-04 21:13:34 訪問数: null

携帯電話で QR コードをスキャンすると、次の情報が表示されます。

 

サポートされている形式: (無制限)

規則: 年-YYYY 月-MM 日-DD 時-hh 分-mm 秒-ss /、-、スペース、: のいずれかで区切られ、自由に組み合わせることができます。単一の繰り返しは推奨されません

例：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...

 折り返し電話：

レンダリングでは以下が表示されます:

rolldate.min.js ライブラリが使用されます。

 

以下にコードを示します。

 

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>多格式、功能强大的移动端日期选择插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<!-- bootstrap.css仅作为示例演示使用 -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<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>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>多格式、功能强大的移动端日期选择插件 <span>Mobile-first iOS-style Date Picker In Vanilla JavaScript</span></h1>
		</header>
		<div class="container">
			<h4><strong>扫描在手机上查看效果：</strong></h4>
			<div>
				<img src="./img/demo-qrcode.png" class="center-block">
			</div>
		<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>其他示例</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>
	
	<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'
			})

			// 其他示例
			//日期判断
			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>

試してみてください~

 

おすすめ

転載: blog.csdn.net/weixin_42220533/article/details/107976449
おすすめ
ランキング
チップ製造の詳しい説明 エッチング原理 学習メモ(5)
StringBuilderを持つコンストラクタがそうではないのはなぜStringクラスのコンストラクタメソッドは、パラメータのStringBufferの使用の同期ブロックでいますか？
[Done] exited with code=3221225477 in 34.566 seconds
并行端口（Parallel Port）
推奨システム評価試験
3.22のノートが質問を行います
手紙の面白い組み合わせ
Flutter ポッドのインストールが報告されました [!] プロジェクト ディレクトリ ソリューションに Podfile が見つかりません
PromSQL の実践的なクエリ ステートメントの概要 (常に更新)
使用dedecms織ラベルはarclist夢
アーカイブ
もっと
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)

コードワールド

© 2018 codetd.com