<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>
<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'
})
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: '秒'
};
new Rolldate({
el: '#date-group3-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
lang: lang
})
new Rolldate({
el: '#date-group4-1',
format: 'YYYY-MM-DD',
beginYear: 2000,
endYear: 2100,
value: '2017-10-21'
})
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
})
new Rolldate({
el: '#date-group7-1',
trigger: 'click'
})
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());
if (d1 < d2) {
alert('不能小于当前的日期');
return false;
}
}
})
}
</script>
<script type="text/javascript" src="rolldate.min.js"></script>
</body></html>