|
|
<link type="text/css" rel="stylesheet" href="/js/lyydate/skins/default/laydate.css" id="LayDateSkin">
|
|
|
<script src="/js/lyydate/jquery.lyydate.min.js"></script>
|
|
|
|
|
|
<style type="text/css">
|
|
|
.haha{width: 600px;float: left;}
|
|
|
.haha td{height: 50px;}
|
|
|
.haha td input{margin-right: 10px;}
|
|
|
.right_col{float: right;width: 500px;}
|
|
|
</style>
|
|
|
<div class="col-xs-24" style="padding:30px;margin-bottom:50px;">
|
|
|
<div style="float:left;width:650px;">
|
|
|
<h1 style="font-size:24px;margin-bottom:30px;">日期选择器使用文档</h1>
|
|
|
<p>1. 周末、节假日有图标或者背景区分<br>
|
|
|
2. 支持日历联动 。如酒店checkin日期选择后，再选check out日期的话，check in之前的时间不能选。<br>
|
|
|
3. 指定日期可用，只能选择设置好的日期。<br>
|
|
|
4. 禁用指定日期，如7天内的日期不能选择,或者指定的某天不能选择。<br>
|
|
|
5. 支持日历备注，方便展示各种信息，如价格、促销信息、时差提醒<br>
|
|
|
6. 样式要能够根据站点不用调用不同的CSS<br>
|
|
|
7. 易用性、多浏览器兼容性、自适应<br>
|
|
|
8. 支持多语种<br>
|
|
|
</p>
|
|
|
|
|
|
<div class="col-xs-24 alert alert-warning">
|
|
|
<h4>温馨提示</h4>
|
|
|
<ol>
|
|
|
<li>节假日目前只是把字体标注为红色，可以根据需要自己调整为需要的背景</li>
|
|
|
<li>目前支持ie6+（不包括ie6）</li>
|
|
|
<li>兼容目前我们网前正在用的bootstrap框架</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
<h1 style="font-size:24px;margin-bottom:30px;">使用方法</h1>
|
|
|
<div class="col-xs-24" style="margin-bottom:30px;">
|
|
|
<p>引入资源文件:</p>
|
|
|
<p><?php echo htmlentities('<link type="text/css" href="http://www.mycht.cn/js/lyydate/skins/default/laydate.css">');?></p>
|
|
|
<p><?php echo htmlentities('<script src="http://www.mycht.cn/js/lyydate/jquery.lyydate.min.js"></script>') ?></p>
|
|
|
<p>初始化日历：</p>
|
|
|
<p><?php echo htmlentities('<script>$("input").lyydatepicker();</script>'); ?></p>
|
|
|
</div>
|
|
|
|
|
|
<h1 style="font-size:24px;margin-bottom:30px;">使用范例:</h1>
|
|
|
<table class="haha">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>普通日历</p>
|
|
|
<p><input readonly readonly class="laydate-icon" id="demo3" value=""></p>
|
|
|
<p class="well">
|
|
|
$('#demo3').lyydatepicker();
|
|
|
</p>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>设定开始日期、允许选择年份、月份视图</p>
|
|
|
<p><input readonly class="laydate-icon" id="demo4" value=""></p>
|
|
|
<p class="well">$('#demo4').lyydatepicker({startDate: '2015-07-20',defaultDate: '2015-07-20'});</p>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>支持日历备注，方便展示各种信息，如价格、促销信息、提醒,<span style="color:red;">点一下7.30号看看</span></p>
|
|
|
<p><input readonly class="laydate-icon" id="demo5" value=""></p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p>$('#demo5').lyydatepicker({ </p><p> remarks:'[</p><p> //<span style="white-space:normal;">说明：</span><span style="white-space:normal;">date是日期，remark是日期备注，title是日期的标题，点击日期后title会在整个日历的底部展示出来</span><span style="white-space:normal;"></span> </p><p> //如果date为default，则对应的remark值会成为每一个日期的默认备注</p><p> {"date":"default","remark":"$625"},</p><p> {"date":"2015-7-18","remark":"$512"},</p><p> {"date":"2015-7-30","remark":"$1024","title":"吼吼"} </p><p> ]',</p><p> <span style="line-height:1.5;"> date_description:"这个整个日历底部的备注说明",</span> </p><p><span style="line-height:1.5;"> autoclose: false，</span> </p><p><span style="line-height:1.5;"></span> </p><p style="white-space:normal;"> onSelect:function(f){ </p><p style="white-space:normal;"> $('#demos').data("startDate",f); </p><p style="white-space:normal;"><span style="line-height:1.5;"> }</span></p><p><span style="line-height:1.5;">});</span> </p> </div>
|
|
|
</td></tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>联动日历：checkin日期选择后，再选check out日期的话，check in之前的时间不能选</p>
|
|
|
<p class="col-xs-24 nopadding">
|
|
|
<input readonly class="laydate-icon" id="demo" value="" style="float:left;">
|
|
|
<input readonly class="laydate-icon" id="demos" value="" style="float:left;">
|
|
|
</p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p>$('#demo').lyydatepicker({</p><p> format: 'yyyy/mm/dd', </p><p> onSelect:function(f,n){ </p><p> $('#demos').data("startDate",f); </p><p> $('#demos').data("defaultDate",n); </p><p> } </p><p> });</p>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>区分<span style="color:red;">节假日</span>(包括传统节日、周末)</p>
|
|
|
<p><input readonly class="laydate-icon" id="demo7" value=""></p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p>$('#demo7').lyydatepicker({</p><p> festival_replace_date:false, //节日名称是否覆盖日期</p><p> festival:true //显示节假日</p><p> });</p>
|
|
|
</div>
|
|
|
</td></tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>添加超链接</p>
|
|
|
<p><input readonly class="laydate-icon" id="demo8" value=""></p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p>$('#demo8').lyydatepicker({ </p><p> remarks:'[</p><p> {"date":"2015-6-26","link":"http://www.mycht.cn","remark":"点我"}</p><p> ]' </p><p> });</p>
|
|
|
</div>
|
|
|
|
|
|
</td></tr>
|
|
|
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>指定日期可用</p>
|
|
|
<p><input readonly class="laydate-icon" id="demo6" value=""></p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p> $('#demo6').lyydatepicker({</p><p> startDate: '2015-07-20', </p><p> remarks:'[</p><p> {"date":"2015-6-18"},</p><p> {"date":"2015-6-30"}]', </p><p> onlyremarkdate:true </p><p> });</p>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<p>其他</p>
|
|
|
<p><input readonly class="laydate-icon" id="demo9" value=""></p>
|
|
|
<div class="col-xs-24 well">
|
|
|
<p>$('#demo9').lyydatepicker({</p><p> format:"mm/dd/yyyy h:i:s", </p><p> language:"zh",//语言选择</p><p> todayBtn:true, //显示今天按钮</p><p> autoclose: false, //选择日期之后不自动关闭日历</p><p> numberOfMonths:2, //一次显两个日历</p><p> max_width:"800", //日历宽度800px</p><p> festival:true, //区分节假日</p><p> onSelect:function(f){//选择日期之后调用的操作 </p><p> alert("吼吼，你选择了:"+f)</p><p> } </p><p> });</p>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="right_col">
|
|
|
<span style="font-family:'Microsoft YaHei';font-size:18px;">可供配置的选项说明:</span><br /><br />
|
|
|
<div class="col-xs-24">
|
|
|
<p>
|
|
|
var options = {
|
|
|
</p>
|
|
|
<p>
|
|
|
event: "click",//激活日历的事件
|
|
|
</p>
|
|
|
<p>
|
|
|
format: 'yyyy/mm/dd',//日期格式,没有前导零请使用yy、m、d
|
|
|
</p>
|
|
|
<p>
|
|
|
startDate: '1900-01-01',//可用日期起始日
|
|
|
</p>
|
|
|
<p>
|
|
|
endDate: '2100-12-31',//可用日期结束时间
|
|
|
</p>
|
|
|
<p>
|
|
|
defaultDate: '',//默认选中日期
|
|
|
</p>
|
|
|
<p>
|
|
|
language: 'en',//语种
|
|
|
</p>
|
|
|
<p>
|
|
|
date_description:'',//日历底部默认备注
|
|
|
</p>
|
|
|
<p>
|
|
|
changeMonth: true,//月份可以改变
|
|
|
</p>
|
|
|
<p>
|
|
|
changeYear: true,//年份可以选择
|
|
|
</p>
|
|
|
<p>
|
|
|
todayBtn: false,//显示“今天”按钮
|
|
|
</p>
|
|
|
<p>
|
|
|
autoclose: true,//是否显示“确定”按钮，选择日期后自动关闭日历
|
|
|
</p>
|
|
|
<p>
|
|
|
festival: false,//区分节假日
|
|
|
</p>
|
|
|
<p>
|
|
|
festival_replace_date:true,//用节假日名称代替日期
|
|
|
</p>
|
|
|
<p>
|
|
|
remarks: false,//日期备注
|
|
|
</p>
|
|
|
<p>
|
|
|
onlyremarkdate:false,//指定日期可用
|
|
|
</p>
|
|
|
<p>
|
|
|
disable_date:'2015-07-25,2015-07-27,2015-07-29',//禁用指定日期
|
|
|
</p>
|
|
|
<p>
|
|
|
numberOfMonths:1,//日历显示一个月或者多个月
|
|
|
</p>
|
|
|
<p>
|
|
|
max_width:360,//日历最大宽度
|
|
|
</p>
|
|
|
<p>
|
|
|
row_height:45,//具体每一格日期的高度
|
|
|
</p>
|
|
|
<p>
|
|
|
onSelect: function(selectedday,nextday)//选择日期之后的调用的函数
|
|
|
</p>
|
|
|
<p>
|
|
|
};
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
$('#demo3').lyydatepicker({
|
|
|
changeMonth: false,
|
|
|
disable_date:'2015-8-24,2015-8-26,2015-8-28',
|
|
|
changeYear: false
|
|
|
});
|
|
|
|
|
|
$('#demo4').lyydatepicker({
|
|
|
max_width:"500",
|
|
|
startDate: '2015-07-20',
|
|
|
defaultDate: '2015-07-20'
|
|
|
});
|
|
|
|
|
|
$('#demo5').lyydatepicker({
|
|
|
max_width:"500",
|
|
|
remarks:'[{"date":"default","remark":"$625"},{"date":"2015-7-21","remark":"$512"},{"date":"2015-7-30","remark":"$1024","title":"吼吼"}]'
|
|
|
,date_description:"我是默认备注我是默认备注",
|
|
|
autoclose: false
|
|
|
|
|
|
});
|
|
|
|
|
|
$('#demo6').lyydatepicker({
|
|
|
startDate: '2016-09-10',
|
|
|
defaultDate:'2016-09-10',
|
|
|
remarks:'[{"date":"2016-09-18"},{"date":"2016-09-30"}]',
|
|
|
onlyremarkdate:true
|
|
|
});
|
|
|
|
|
|
$('#demo7').lyydatepicker({
|
|
|
festival_replace_date:false,
|
|
|
festival:true
|
|
|
});
|
|
|
|
|
|
$('#demo8').lyydatepicker({
|
|
|
remarks:'[{"date":"2015-6-26","link":"http://www.mycht.cn","remark":"点我"},{"date":"2015-6-27","link":"http://www.mycht.cn","remark":"点我"}]'
|
|
|
});
|
|
|
|
|
|
$('#demo9').lyydatepicker({
|
|
|
format:"mm/dd/yyyy h:i:s",
|
|
|
language:"zh",
|
|
|
todayBtn:true,
|
|
|
autoclose: false,
|
|
|
numberOfMonths:2,
|
|
|
max_width:"800",
|
|
|
festival:true,
|
|
|
onSelect:function(f){
|
|
|
alert("吼吼，你选择了:"+f)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$('#demo').lyydatepicker({
|
|
|
format: 'yyyy/mm/dd',
|
|
|
onSelect:function(f,n){
|
|
|
$('#demos').data("startDate",f);
|
|
|
$('#demos').data("defaultDate",n);
|
|
|
}
|
|
|
});
|
|
|
$('#demos').lyydatepicker({
|
|
|
format: 'yyyy/mm/dd'
|
|
|
});
|
|
|
|
|
|
|
|
|
});
|
|
|
</script>
|