rolldate-full
Version:
rolldate Multi-format, powerful mobile date selection plugin
394 lines (376 loc) • 13.8 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>
<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>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>rolldate Multi-format, powerful mobile date selection plugin</h1>
<p>This is the new version of rolldate 3.1
<a href="https://weijhfly.github.io/rolldate-index2.html">Back to the old version</a></p>
</div>
</div>
<div class="container">
<h4><strong>Supported formats: (unlimited)</strong></h4>
<p><strong> Rule: year-YYYY month-MM day-DD hour-hh minute-mm second-ss Use /,-, space, or: to separate them, you can combine them at will, and it is not recommended to repeat them individually. </strong></p>
<p> Example: 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="text Month">
</div>
</div>
</div>
<h4><strong>Callback：</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 prevents plugins from running</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 prevents the plugin from running, returning other values can modify the date display</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>Custom language </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>Set default date</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="Set default date">
</div>
</div>
</div>
<h4><strong>el pass dom object</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 pass dom object">
</div>
</div>
</div>
<h4><strong>Minute interval</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="Minute interval">
</div>
</div>
</div>
<h4><strong>Use native 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>Do not pass 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="Do not pass el">
</div>
</div>
</div>
<h4><strong>Other examples</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="Cannot be smaller than the current date">
</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-MM-DD',
beginYear: 2000,
endYear: 2100,
typeMonth: 'text',
localeMonth: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
})
/* 回调函数
* tips: 在vue及其他mvvm框架中使用时，在confirm中修改v-model绑定的数据即可
*/
new Rolldate({
el: '#date-group2-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
init: function () {
console.log('Plugin starts to fire');
},
moveEnd: function (scroll) {
console.log(scroll)
console.log('End of scroll');
},
confirm: function (date) {
console.log(date)
console.log('OK button trigger\n');
},
cancel: function () {
console.log('Plug-in canceled');
}
})
new Rolldate({
el: '#date-group2-2',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
init: function () {
if (1 == 1) {
console.log('Prevent the plugin from continuing');
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: ' секунд'
};
// If a value is not modified, it can not be passed
new Rolldate({
el: '#date-group3-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
lang: lang
})
// Set default date internally use 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>
</body>
</html>