<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简洁清爽多功能多皮肤时间日期控制效果</title>
<script src="laydate/laydate.js"></script>
<style>
*{margin:0;padding:0;list-style:none;}
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
h2{line-height:30px; font-size:20px;}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{width:970px; padding:10px 20px; background-color:#fff; margin:10px auto;}
.box a{padding-right:20px;}
.demo1,.demo2,.demo3,.demo4,.demo5,.demo6{margin:25px 0;}
h3{margin:10px 0;}
.layinput{height: 22px;line-height: 22px;width: 150px;margin: 0;}
</style>
</head>
<body>
<div class="box">
<pre>
<strong>【注意事项】</strong>
一、请千万勿移动laydate中的目录结构，它们具有完整的依赖体系。使用时，只需引入laydate/laydate.js即可。
二、如果您的网站的js采用合并或模块加载，您需要打开laydate.js，修改path。
</pre>
<div class="demo1">
<h3>演示二（普通模式）</h3>
<input class="laydate-icon" id="demo" value="2014-6-25更新">
</div>
<div class="demo2">
<h3>演示一（日期精确到秒）</h3>
<input placeholder="请输入日期" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
</div>
<div class="demo3">
<h3>演示三（日期范围限制）</h3>
<ul class="inline">
开始日：<li class="inline laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>
结束日：<li class="inline laydate-icon" id="end" style="width:200px;"></li>
</ul>
</div>
<div class="demo4">
<h3>演示四（自定义日期格式）</h3>
<div id="test1" class="inline laydate-icon" style="width:150px;"></div>
</div>
<div class="demo5">
<h3>演示五（日期范围限定在昨天到明天）</h3>
<div class="inline laydate-icon" style="width:150px;" id="hello3"></div>
</div>
<div class="demo6">
<h3>演示六（按钮触发日期）</h3>
<input readonly class="layinput" id="hello1">
<div class="laydate-icon " onClick="laydate({elem: '#hello1'});" style="width:10px;display:inline-block;border:none;"></div>
</div>
</div>
<script>
!function(){
laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
laydate({elem: '#demo'});//绑定元素
}();
//日期范围限制
var start = {
elem: '#start',
format: 'YYYY-MM-DD',
min: laydate.now(), //设定最小日期为当前日期
max: '2099-06-16', //最大日期
istime: true,
istoday: false,
choose: function(datas){
end.min = datas; //开始日选好后，重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
elem: '#end',
format: 'YYYY-MM-DD',
min: laydate.now(),
max: '2099-06-16',
istime: true,
istoday: false,
choose: function(datas){
start.max = datas; //结束日选好后，充值开始日的最大日期
}
};
laydate(start);
laydate(end);
//自定义日期格式
laydate({
elem: '#test1',
format: 'YYYY年MM月DD日',
festival: true, //显示节日
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
//日期范围限定在昨天到明天
laydate({
elem: '#hello3',
min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
</body>
</html>
474181592988027laydate.zip （17个子文件） 
laydate 
laydate.js 13KB skins molv laydate.css 4KB
icon.png 309B default laydate.css 4KB icon.png 314B yalan laydate.css 3KB icon.png 324B dahong laydate.css 3KB icon.png 307B yahui laydate.css 4KB icon.png 314B qianhuang laydate.css 4KB icon.png 328B danlan laydate.css 3KB icon.png 328B need laydate.css 6KB
index.html 4KB资源评论
