@vantist/rolldate
Version:
rolldate 多格式、功能强大的移动端日期选择插件
514 lines (490 loc) • 13.9 kB
HTML
<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">
<script src="../dist/rolldate.js"></script>
<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="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>
<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-group10-1" placeholder="不能大於 2024-01-01">
</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-group11-1" placeholder="不能小於 2023-01-01">
</div>
</div>
</div>
<h4><strong>AM/PM</strong></h4>
<div class="row">
<div class="form-group clearfix">
<div class="col-xs-6">
<input readonly class="form-control" type="text" id="date-group12-1" placeholder="AM/PM">
</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-group13-1" placeholder="上午/下午">
</div>
</div>
</div>
<h4><strong>最小時間(time)</strong></h4>
<div class="row">
<div class="form-group clearfix">
<div class="col-xs-6">
<input readonly class="form-control" type="text" id="date-group14-1" placeholder="不能小於 01:00, 不能大於 22:00">
</div>
</div>
</div>
<h4><strong>最小時間(time) AM/PM</strong></h4>
<div class="row">
<div class="form-group clearfix">
<div class="col-xs-6">
<input readonly class="form-control" type="text" id="date-group15-1" placeholder="不能小於 01:00, 不能大於 22:00 AM/PM">
</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: '確認',
reset: '重置',
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物件，僅支援單一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;
},
reset: function() {
el.value = '';
}
})
// 其他範例
// 日期判斷
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;
}
}
})
// 最大時間
new Rolldate({
el: '#date-group10-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
max: '2024-01-01'
})
// 最小時間
new Rolldate({
el: '#date-group11-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
min: '2023-01-01'
})
// AM/PM
new Rolldate({
el: '#date-group12-1',
format: 'HH:mm',
showAMPM: true,
keepAMPMLeft: false,
lang: {
year: '',
month: '',
day: '',
hour: '',
min: '',
sec: ''
}
})
// 中文 AM/PM
new Rolldate({
el: '#date-group13-1',
format: 'HH:mm',
showAMPM: true,
keepAMPMLeft: true,
lang: {
year: '',
month: '',
day: '',
hour: '',
min: '',
sec: '',
am: '上午',
pm: '下午'
}
})
// 最小時間
new Rolldate({
el: '#date-group14-1',
format: 'HH:mm',
min: '18:00',
max: '22:00'
})
// 最小時間
new Rolldate({
el: '#date-group15-1',
format: 'HH:mm',
min: '01:00',
max: '22:00',
showAMPM: true,
keepAMPMLeft: false,
})
}
</script>
</body>
</html>