<!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
需积分: 0 117 浏览量
更新于2023-08-03
1
收藏 20KB ZIP 举报
标题 "474181592988027laydate.zip" 提到的是一个名为 "laydate" 的压缩包文件，这通常包含了某个JavaScript日期插件的资源。"laydate" 是一个流行的前端日期时间选择器库，它提供了一套完整的日期和时间选择解决方案，适用于网页应用中，简化了用户输入日期或时间的操作。
描述中的 "474181592988027laydate.zip" 与标题相同，暗示了这个压缩包可能是一个特定版本或特定编号的laydate库。由于没有更具体的信息，我们主要围绕laydate这个工具进行讨论。
在标签部分为空的情况下，我们可以从压缩包内的文件名来推测内容。"index.html" 是网页的入口文件，通常用于展示laydate插件的示例或者文档说明。而 "laydate" 文件可能是该插件的核心JavaScript代码或者相关的CSS样式文件。
laydate插件的主要知识点包括：
1. **基本使用**：在HTML中引入laydate.js和对应的CSS文件，通过调用laydate()函数来初始化日期选择器，可以设置在特定的input元素上。
2. **配置项**：laydate支持多种配置参数，如format（日期格式）、type（日期类型，如日期、年月等）、max和min（日期范围限制）等，允许开发者自定义日期选择器的行为。
3. **事件处理**：laydate提供了onSelect事件，当用户选择日期后触发，可以在此事件中处理选定日期后的逻辑。
4. **多语言支持**：laydate内置了多种语言，可以根据需要切换，满足国际化需求。
5. **API扩展**：除了基本功能，laydate还提供了丰富的API接口，如laydate.now()获取当前日期，laydate.parse()解析日期字符串等，方便开发者进行复杂操作。
6. **自定义样式**：通过CSS，开发者可以调整laydate弹出框的样式，以符合项目的设计规范。
7. **移动端适配**：laydate对移动设备也有良好的支持，适应各种屏幕尺寸，提供触摸滑动选择日期的体验。
8. **日期计算**：laydate能进行日期的加减运算，例如添加一个月份或者向前回溯一年。
9. **日期验证**：在表单提交时，laydate的日期格式化和验证功能可以帮助确保用户输入的日期有效。
10. **版本管理**："laydate.zip" 包含的可能是laydate的一个特定版本，不同版本可能有不同的特性或修复了某些bug，因此在升级时要注意兼容性问题。
laydate是一个功能强大的前端日期选择器，不仅提供了基本的日期选择功能，还支持各种自定义配置和扩展，是开发中常用的前端工具之一。通过学习和掌握laydate的使用，可以提高网页交互的用户体验。
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 4KB195 浏览量
2019-07-05 上传
2019-07-11 上传
172 浏览量
2022-03-28 上传
2019-07-14 上传
176 浏览量
175 浏览量
178 浏览量
110 浏览量
185 浏览量
168 浏览量
140 浏览量
2022-11-01 上传
104 浏览量
181 浏览量
112 浏览量
151 浏览量
111 浏览量
197 浏览量
2023-02-26 上传
2020-07-13 上传
2021-12-01 上传
115 浏览量
资源评论
m0_60387927
- 粉丝: 0
- 资源: 1
