information-system/webht/third_party/apidoc/views/datepicker.php

<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({&nbsp;</p><p>	&nbsp;&nbsp;&nbsp;&nbsp;remarks:'[</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//<span style="white-space:normal;">说明：</span><span style="white-space:normal;">date是日期，remark是日期备注，title是日期的标题，点击日期后title会在整个日历的底部展示出来</span><span style="white-space:normal;"></span> </p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//如果date为default，则对应的remark值会成为每一个日期的默认备注</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{"date":"default","remark":"$625"},</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{"date":"2015-7-18","remark":"$512"},</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{"date":"2015-7-30","remark":"$1024","title":"吼吼"}&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;]',</p><p>	<span style="line-height:1.5;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date_description:"这个整个日历底部的备注说明",</span> </p><p><span style="line-height:1.5;">&nbsp; &nbsp; &nbsp;autoclose: false，</span> </p><p><span style="line-height:1.5;"></span> </p><p style="white-space:normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSelect:function(f){&nbsp;</p><p style="white-space:normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#demos').data("startDate",f);&nbsp;</p><p style="white-space:normal;"><span style="line-height:1.5;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format: 'yyyy/mm/dd',&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSelect:function(f,n){&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#demos').data("startDate",f);&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#demos').data("defaultDate",n);&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</p><p>&nbsp;});</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;festival_replace_date:false, //节日名称是否覆盖日期</p><p>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;festival:true //显示节假日</p><p>&nbsp;});</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({&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remarks:'[</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{"date":"2015-6-26","link":"http://www.mycht.cn","remark":"点我"}</p><p>&nbsp;&nbsp;&nbsp;&nbsp;]'&nbsp;</p><p>&nbsp;});</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>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startDate: '2015-07-20',&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remarks:'[</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{"date":"2015-6-18"},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{"date":"2015-6-30"}]',&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onlyremarkdate:true&nbsp;</p><p>&nbsp;});</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:"mm/dd/yyyy h:i:s",&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language:"zh",//语言选择</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;todayBtn:true, //显示今天按钮</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoclose: false, //选择日期之后不自动关闭日历</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;numberOfMonths:2, //一次显两个日历</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_width:"800", //日历宽度800px</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;festival:true, //区分节假日</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSelect:function(f){//选择日期之后调用的操作&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("吼吼，你选择了:"+f)</p><p>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</p><p>&nbsp;});</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 = {&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event: "click",//激活日历的事件&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format: 'yyyy/mm/dd',//日期格式,没有前导零请使用yy、m、d&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startDate: '1900-01-01',//可用日期起始日&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endDate: '2100-12-31',//可用日期结束时间&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultDate: '',//默认选中日期
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language: 'en',//语种&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date_description:'',//日历底部默认备注&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeMonth: true,//月份可以改变&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeYear: true,//年份可以选择&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;todayBtn: false,//显示“今天”按钮&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoclose: true,//是否显示“确定”按钮，选择日期后自动关闭日历&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;festival: false,//区分节假日&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;festival_replace_date:true,//用节假日名称代替日期&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remarks: false,//日期备注
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onlyremarkdate:false,//指定日期可用&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable_date:'2015-07-25,2015-07-27,2015-07-29',//禁用指定日期&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;numberOfMonths:1,//日历显示一个月或者多个月&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_width:360,//日历最大宽度&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row_height:45,//具体每一格日期的高度&nbsp;
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSelect: function(selectedday,nextday)//选择日期之后的调用的函数&nbsp;
</p>
<p>
	&nbsp;};
</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>