jQuery酒店入住离店时间选择代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery酒店入住离店时间选择代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" />
<head>
<title>jQuery酒店入住离店时间选择代码</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dateRange.js"></script>
<link rel="stylesheet" type="text/css" href="css/dateRange.css"/>

</head>
<body>
<br><br><br><br><br>
<div style="margin:0 auto; width:250px; height:100px;">
<div class="ta_date" id="div_date1">
	<span class="date_title" id="date1"></span>
</div>
</div>
<script type="text/javascript">
	var dateRange1 = new pickerDateRange('date1', {
		stopToday : false,
		isTodayValid : true,
		startDate: '2015-11-05',
		endDate: '2015-11-06',
		needCompare : false,
		defaultText : ' 离开 ',
		autoSubmit : false,
		inputTrigger : 'input_trigger1',
		theme : 'ta'
	});

</script>
</body>
</html>

JS代码(dateRange.js):

/** *======================================================================= *日期选择器js组件。 *@author ：johnnyzheng(johnnyzheng@tencent.com) 郑灿双 *@version ： 2012-07-11 *@modification list：2012-08-16 规范样式名称 * 2013-01-04 增加主题设置接口 * 2013-01-31 增加自定义灰掉周末 周几的选项，增加自动初始化自动提交的功能 * 2013-03-15 支持一个页面多个日期选择器，快捷日期选择 * 2013-03-26 增加确认、取消按钮的隐藏，而直接自动提交 * 2013-08-01 扩展接口，增加最近90天，增加自定义可选时间 * 2013-08-12 日期选择器框体宽度超出视窗大小的时候制动鼓靠右对齐 * 2014-02-25 增加业务接口：获取当前日期对象的的选中日期 * 2014-10-13 扩展参数，支持日期下拉选择自定义年和月份，配合theme:ta来使用。 *=======================================================================*/
/*** @description 整个日期选择器对象的构造函数入口，支持丰富的接口参数传递，大多数提供默认配置，可传入覆盖* @param{
	String}
inputId 日期选择器ID* @param{
	object}
options 配置数组*/
function pickerDateRange(inputId,options){
	/** * 默认配置参数数据，每个参数涵义在后解释 */
 var defaults ={
	aToday:'aToday',//今天aYesterday:'aYesterday',//昨天aRecent7Days:'aRecent7Days',//最近7天aRecent14Days:'aRecent14Days',//最近14天aRecent30Days:'aRecent30Days',//最近30天aRecent90Days:'aRecent90Days',//最近90天 startDate:'',// 开始日期 endDate:'',// 结束日期 startCompareDate:'',// 对比开始日期 endCompareDate:'',// 对比结束日期 minValidDate:'315507600',//最小可用时间，控制日期选择器的可选力度 maxValidDate:'',// 最大可用时间，与stopToday 配置互斥 success:function(obj){
	return true;
}
,//回调函数，选择日期之后执行何种操作 startDateId:'startDate',// 开始日期输入框ID startCompareDateId:'startCompareDate',// 对比开始日期输入框ID endDateId:'endDate',// 结束日期输入框ID endCompareDateId:'endCompareDate',// 对比结束日期输入框ID target:'',// 日期选择框的目标，一般为 <form> 的ID值 needCompare:false,// 是否需要进行日期对比suffix:'',//相应控件的后缀inputTrigger:'input_trigger',compareTrigger:'compare_trigger',compareCheckboxId:'needCompare',// 比较选择框 calendars:1,// 展示的月份数，最大是2 dayRangeMax:0,// 日期最大范围(以天计算) monthRangeMax:12,// 日期最大范围(以月计算) dateTable:'dateRangeDateTable',// 日期表格的CSS类 selectCss:'dateRangeSelected',// 时间选择的样式 compareCss:'dateRangeCompare',// 比较时间选择的样式 coincideCss:'dateRangeCoincide',// 重合部分的样式firstCss:'first',//起始样式lastCss:'last',//结束样式clickCss:'today',//点击样式 disableGray:'dateRangeGray',// 非当前月的日期样式 isToday:'dateRangeToday',// 今天日期的样式 joinLineId:'joinLine',isSingleDay:false,defaultText:' 至 ',singleCompare:false,stopToday:true,isTodayValid:false,weekendDis:false,//灰掉周末不可选。disCertainDay:[],//不可用的周日期设置数组，如：[1,3]是要周一， 周三 两天不可选，每个周的周一，周三都不可选择。 disCertainDate:[],//不可用的日期设置数组，如:[1,3]是要1号，3号 两天不可选，特别的，[true,1,3]则反之，只有1，3可选，其余不可选。shortOpr:false,//结合单天日期选择的短操作，不需要确定和取消的操作按钮。noCalendar:false,//日期输入框是否展示theme:'gri',//日期选择器的主题，目前支持 'gri' / 'ta'magicSelect:false,//用户自定义选择年、月，与{
	theme:ta}
配合使用。autoCommit:false,//加载后立马自动提交autoSubmit:false,//没有确定，取消按钮，直接提交replaceBtn:'btn_compare'}
;
	//将对象赋给__method变量 var __method = this;
	this.inputId = inputId;
	this.inputCompareId = inputId + 'Compare';
	this.compareInputDiv = 'div_compare_'+inputId;
	// 配置参数 this.mOpts = $.extend({
}
,defaults,options);
	//默认日历参数最大是3this.mOpts.calendars = Math.min(this.mOpts.calendars,3);
	//根据不同主题需要初始化的变量this.mOpts.compareCss = this.mOpts.theme == 'ta' ? this.mOpts.selectCss:this.mOpts.compareCss //昨天,今天,最近7天,最近14天,最近30天this.periodObj ={
}
;
	this.periodObj[__method.mOpts.aToday] = 0;
	this.periodObj[__method.mOpts.aYesterday] = 1;
	this.periodObj[__method.mOpts.aRecent7Days] = 6;
	this.periodObj[__method.mOpts.aRecent14Days] = 13;
	this.periodObj[__method.mOpts.aRecent30Days] = 29;
	this.periodObj[__method.mOpts.aRecent90Days] = 89;
	// 记录初始默认时间 this.startDefDate = '';
	// 随机ID后缀 var suffix = '' == this.mOpts.suffix ? (new Date()).getTime():this.mOpts.suffix;
	// 日期选择框DIV的ID this.calendarId = 'calendar_' + suffix;
	// 日期列表DIV的ID this.dateListId = 'dateRangePicker_' + suffix;
	// 日期比较层 this.dateRangeCompareDiv = 'dateRangeCompareDiv_' + suffix;
	//日期选择层this.dateRangeDiv = 'dateRangeDiv_' + suffix;
	// 日期对比选择控制的checkbox this.compareCheckBoxDiv = 'dateRangeCompareCheckBoxDiv_' + suffix;
	// 时间选择的确认按钮 this.submitBtn = 'submit_' + suffix;
	// 日期选择框关闭按钮 this.closeBtn = 'closeBtn_' + suffix;
	// 上一个月的按钮 this.preMonth = 'dateRangePreMonth_' + suffix;
	// 下一个月的按钮 this.nextMonth = 'dateRangeNextMonth_' + suffix;
	// 表单中开始、结束、开始对比、结束对比时间 this.startDateId = this.mOpts.startDateId + '_' + suffix;
	this.endDateId = this.mOpts.endDateId + '_' + suffix;
	this.compareCheckboxId = this.mOpts.compareCheckboxId + '_' + suffix;
	this.startCompareDateId = this.mOpts.startCompareDateId + '_' + suffix;
	this.endCompareDateId = this.mOpts.endCompareDateId + '_' + suffix;
	// 初始化日期选择器面板的HTML代码串 var wrapper ={
	gri:['<div id="' + this.calendarId + '" class="gri_dateRangeCalendar">','<table class="gri_dateRangePicker"><tr id="' + this.dateListId + '"></tr></table>','<div class="gri_dateRangeOptions" '+ (this.mOpts.autoSubmit ? ' style="display:none" ':'') +'>','<div class="gri_dateRangeInput" id="' + this.dateRangeDiv + '" >','<input type="text" class="gri_dateRangeInput" name="' + this.startDateId + '" id="' + this.startDateId + '" value="' + this.mOpts.startDate + '" readonly />','<span id="' + this.mOpts.joinLineId + '"> - </span>','<input type="text" class="gri_dateRangeInput" name="' + this.endDateId + '" id="' + this.endDateId + '" value="' + this.mOpts.endDate + '" readonly /><br />','</div>','<div class="gri_dateRangeInput" id="' + this.dateRangeCompareDiv + '">','<input type="text" class="gri_dateRangeInput" name="' + this.startCompareDateId + '" id="' + this.startCompareDateId + '" value="' + this.mOpts.startCompareDate + '" readonly />','<span class="' + this.mOpts.joinLineId + '"> - </span>','<input type="text" class="gri_dateRangeInput" name="' + this.endCompareDateId + '" id="' + this.endCompareDateId + '" value="' + this.mOpts.endCompareDate + '" readonly />','</div>','<div>','<input type="button" name="' + this.submitBtn + '" id="' + this.submitBtn + '" value="确定" />','&nbsp;
	<a id="' + this.closeBtn + '" href="javascript:;
	">关闭</a>','</div>','</div>','</div>'],ta:['<div id="' + this.calendarId + '" class="ta_calendar ta_calendar2 cf">','<div class="ta_calendar_cont cf" id="'+ this.dateListId +'">',//'<table class="dateRangePicker"><tr id="' + this.dateListId + '"></tr></table>','</div>','<div class="ta_calendar_footer cf" '+ (this.mOpts.autoSubmit ? ' style="display:none" ':'') +'>','<div class="frm_msg">','<div id="' + this.dateRangeDiv + '">','<input type="text" class="ta_ipt_text_s" name="' + this.startDateId + '" id="' + this.startDateId + '" value="' + this.mOpts.startDate + '" readonly />','<span class="' + this.mOpts.joinLineId + '"> - </span>','<input type="text" class="ta_ipt_text_s" name="' + this.endDateId + '" id="' + this.endDateId + '" value="' + this.mOpts.endDate + '" readonly /><br />','</div>','<div id="' + this.dateRangeCompareDiv + '">','<input type="text" class="ta_ipt_text_s" name="' + this.startCompareDateId + '" id="' + this.startCompareDateId + '" value="' + this.mOpts.startCompareDate + '" readonly />','<span class="' + this.mOpts.joinLineId + '"> - </span>','<input type="text" class="ta_ipt_text_s" name="' + this.endCompareDateId + '" id="' + this.endCompareDateId + '" value="' + this.mOpts.endCompareDate + '" readonly />','</div>','</div>','<div class="frm_btn">','<input class="ta_btn ta_btn_primary" type="button" name="' + this.submitBtn + '" id="' + this.submitBtn + '" value="确定" />','<input class="ta_btn" type="button" id="' + this.closeBtn + '" value="取消"/>','</div>','</div>','</div>']}
;
	//对比日期框体的html串var checkBoxWrapper ={
	gri:['<label class="gri_contrast" for ="' + this.compareCheckboxId + '">','<input type="checkbox" class="gri_pc" name="' + this.compareCheckboxId + '" id="' + this.compareCheckboxId + '" value="1"/>对比','</label>','<input type="text" name="'+this.inputCompareId+'" id="'+this.inputCompareId+'" value="" class="gri_date"/>'],ta:['<label class="contrast" for ="' + this.compareCheckboxId + '">','<input type="checkbox" class="pc" name="' + this.compareCheckboxId + '" id="' + this.compareCheckboxId + '" value="1"/>对比','</label>','<div class="ta_date" id="'+this.compareInputDiv+'">','<span name="dateCompare" id="'+this.inputCompareId+'" class="date_title"></span>','<a class="opt_sel" id="'+ this.mOpts.compareTrigger +'" href="#">','<i class="i_orderd"></i>','</a>','</div>']}
;
	//把checkbox放到页面的相应位置,放置到inputid后面 added by johnnyzhengif(this.mOpts.theme == 'ta'){
	$(checkBoxWrapper[this.mOpts.theme].join('')).insertAfter($('#div_' + this.inputId));
}
else{
	$(checkBoxWrapper[this.mOpts.theme].join('')).insertAfter($('#' + this.inputId));
}
//根据传入参数决定是否展示日期输入框if(this.mOpts.noCalendar){
	$('#' + this.inputId).css('display','none');
	$('#' + this.compareCheckboxId).parent().css('display','none');
}
// 把时间选择框放到页面中 $(0 < $('#appendParent').length ? '#appendParent':document.body).append(wrapper[this.mOpts.theme].join(''));
	$('#' + this.calendarId).css('z-index',9999);
	// 初始化目标地址的元素 if(1 > $('#' + this.mOpts.startDateId).length){
	$(''!=this.mOpts.target?'#'+this.mOpts.target:'body').append('<input type="hidden" id="' + this.mOpts.startDateId + '" name="' + this.mOpts.startDateId + '" value="' + this.mOpts.startDate + '" />');
}
else{
	$('#' + this.mOpts.startDateId).val(this.mOpts.startDate);
}
if(1 > $('#' + this.mOpts.endDateId).length){
	$(''!=this.mOpts.target?'#'+this.mOpts.target:'body').append('<input type="hidden" id="' + this.mOpts.endDateId + '" name="' + this.mOpts.endDateId + '" value="' + this.mOpts.endDate + '" />');
}
else{
	$('#' + this.mOpts.endDateId).val(this.mOpts.endDate);
}
if(1 > $('#' + this.mOpts.compareCheckboxId).length){
	$(''!=this.mOpts.target?'#'+this.mOpts.target:'body').append('<input type="checkbox" id="' + this.mOpts.compareCheckboxId + '" name="' + this.mOpts.compareCheckboxId + '" value="0" style="display:none;
	" />');
}
// 如果不需要比较日期，则需要隐藏比较部分的内容 if(false == this.mOpts.needCompare){
	$('#' + this.compareInputDiv).css('display','none');
	$('#' + this.compareCheckBoxDiv).css('display','none');
	$('#' + this.dateRangeCompareDiv).css('display','none');
	$('#' + this.compareCheckboxId).attr('disabled',true);
	$('#' + this.startCompareDateId).attr('disabled',true);
	$('#' + this.endCompareDateId).attr('disabled',true);
	//隐藏对比的checkbox$('#' + this.compareCheckboxId).parent().css('display','none');
	$('#'+ this.mOpts.replaceBtn).length > 0 && $('#'+ this.mOpts.replaceBtn).hide();
}
else{
	if(1 > $('#' + this.mOpts.startCompareDateId).length){
	$(''!=this.mOpts.target?'#'+this.mOpts.target:'body').append('<input type="hidden" id="' + this.mOpts.startCompareDateId + '" name="' + this.mOpts.startCompareDateId + '" value="' + this.mOpts.startCompareDate + '" />');
}
else{
	$('#' + this.mOpts.startCompareDateId).val(this.mOpts.startCompareDate);
}
if(1 > $('#' + this.mOpts.endCompareDateId).length){
	$(''!=this.mOpts.target?'#'+this.mOpts.target:'body').append('<input type="hidden" id="' + this.mOpts.endCompareDateId + '" name="' + this.mOpts.endCompareDateId + '" value="' + this.mOpts.endCompareDate + '" />');
}
else{
	$('#' + this.mOpts.endCompareDateId).val(this.mOpts.endCompareDate);
}
if('' == this.mOpts.startCompareDate || '' == this.mOpts.endCompareDate){
	$('#' + this.compareCheckboxId).attr('checked',false);
	$('#' + this.mOpts.compareCheckboxId).attr('checked',false);
}
else{
	$('#' + this.compareCheckboxId).attr('checked',true);
	$('#' + this.mOpts.compareCheckboxId).attr('checked',true);
}
}
// 输入框焦点定在第一个输入框 this.dateInput = this.startDateId;
	// 为新的输入框加背景色 this.changeInput(this.dateInput);
	// 开始时间 input 的 click 事件 $('#' + this.startDateId).bind('click',function(){
	// 如果用户在选择基准结束时间时，换到对比时间了，则 if(__method.endCompareDateId == __method.dateInput){
	$('#' + __method.startCompareDateId).val(__method.startDefDate);
}
__method.startDefDate = '';
	__method.removeCSS(1);
	//__method.addCSS(1);
	__method.changeInput(__method.startDateId);
	return false;
}
);
	$('#' + this.calendarId).bind('click',function(event){
	//event.preventDefault();
	// 防止冒泡 event.stopPropagation();
}
);
	// 开始比较时间 input 的 click 事件 $('#' + this.startCompareDateId).bind('click',function(){
	// 如果用户在选择基准结束时间时，换到对比时间了，则 if(__method.endDateId == __method.dateInput){
	$('#' + __method.startDateId).val(__method.startDefDate);
}
__method.startDefDate = '';
	__method.removeCSS(0);
	//__method.addCSS(0);
	__method.changeInput(__method.startCompareDateId);
	return false;
}
);
	/** * 设置回调句柄，点击成功后，返回一个时间对象，包含开始结束时间 * 和对比开始结束时间 */
 $('#' + this.submitBtn).bind('click',function(){
	__method.close(1);
	__method.mOpts.success({
	'startDate':$('#' + __method.mOpts.startDateId).val(),'endDate':$('#' + __method.mOpts.endDateId).val(),'needCompare':$('#' + __method.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + __method.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + __method.mOpts.endCompareDateId).val()}
);
	return false;
}
);
	// 日期选择关闭按钮的 click 事件 $('#' + this.closeBtn).bind('click',function(){
	__method.close();
	return false;
}
);
	// 为输入框添加click事件 $('#' + this.inputId).bind('click',function(){
	__method.init();
	__method.show(false,__method);
	return false;
}
);
	$('#' + this.mOpts.inputTrigger).bind('click',function(){
	__method.init();
	__method.show(false,__method);
	return false;
}
);
	$('#' + this.mOpts.compareTrigger).bind('click',function(){
	__method.init(true);
	__method.show(true,__method);
	return false;
}
);
	// 为输入框添加click事件 $('#' + this.inputCompareId).bind('click',function(){
	__method.init(true);
	__method.show(true,__method);
	return false;
}
);
	//判断是否是实时数据,如果是将时间默认填充进去 added by johnnyzheng 12-06if(this.mOpts.singleCompare){
	if(this.mOpts.theme === 'ta'){
	$('#' + __method.startDateId).val(__method.mOpts.startDate);
	$('#' + __method.endDateId).val(__method.mOpts.startDate);
	$('#' + __method.startCompareDateId).val(__method.mOpts.startCompareDate);
	$('#' + __method.endCompareDateId).val(__method.mOpts.startCompareDate);
}
else{
	$('#' + __method.startDateId).val(__method.mOpts.startDate);
	$('#' + __method.endDateId).val(__method.mOpts.startDate);
	$('#' + __method.startCompareDateId).val(__method.mOpts.startCompareDate);
	$('#' + __method.endCompareDateId).val(__method.mOpts.startCompareDate);
	$('#' + this.compareCheckboxId).attr('checked',true);
	$('#' + this.mOpts.compareCheckboxId).attr('checked',true);
}
}
// 时间对比 $('#' + this.dateRangeCompareDiv).css('display',$('#' + this.compareCheckboxId).attr('checked') ? '':'none');
	$('#' + this.compareInputDiv).css('display',$('#' + this.compareCheckboxId).attr('checked') ? '':'none');
	$('#' + this.compareCheckboxId).bind('click',function(){
	$('#' + __method.inputCompareId).css('display',this.checked ? '':'none');
	// 隐藏对比时间选择 $('#' + __method.dateRangeCompareDiv).css('display',this.checked ? '':'none');
	$('#' + __method.compareInputDiv).css('display',this.checked ? '':'none');
	// 把两个对比时间框置为不可用 $('#' + __method.startCompareDateId).css('disabled',this.checked ? false:true);
	$('#' + __method.endCompareDateId).css('disabled',this.checked ? false:true);
	// 修改表单的 checkbox 状态 $('#' + __method.mOpts.compareCheckboxId).attr('checked',$('#' + __method.compareCheckboxId).attr('checked'));
	// 修改表单的值 $('#' + __method.mOpts.compareCheckboxId).val($('#' + __method.compareCheckboxId).attr('checked')?1:0);
	// 初始化选框背景 if($('#' + __method.compareCheckboxId).attr('checked')){
	sDate = __method.str2date($('#' + __method.startDateId).val());
	sTime = sDate.getTime();
	eDate = __method.str2date($('#' + __method.endDateId).val());
	eTime = eDate.getTime();
	scDate = $('#' + __method.startCompareDateId).val();
	ecDate = $('#' + __method.endCompareDateId).val();
	if('' == scDate || '' == ecDate){
	ecDate = __method.str2date(__method.date2ymd(sDate).join('-'));
	ecDate.setDate(ecDate.getDate() - 1);
	scDate = __method.str2date(__method.date2ymd(sDate).join('-'));
	scDate.setDate(scDate.getDate() - ((eTime - sTime) / 86400000) - 1);
	//这里要和STATS_START_TIME的时间进行对比，如果默认填充的对比时间在这个时间之前 added by johnnyzhengif(ecDate.getTime() < __method.mOpts.minValidDate * 1000){
	scDate = sDate;
	ecDate = eDate;
}
if(ecDate.getTime() >= __method.mOpts.minValidDate * 1000 && scDate.getTime() < __method.mOpts.minValidDate * 1000){
	scDate.setTime(__method.mOpts.minValidDate * 1000)scDate = __method.str2date(__method.date2ymd(scDate).join('-'));
	ecDate.setDate(scDate.getDate() + ((eTime - sTime) / 86400000) - 1);
}
$('#' + __method.startCompareDateId).val(__method.formatDate(__method.date2ymd(scDate).join('-')));
	$('#' + __method.endCompareDateId).val(__method.formatDate(__method.date2ymd(ecDate).join('-')));
}
__method.addCSS(1);
	// 输入框焦点切换到比较开始时间 __method.changeInput(__method.startCompareDateId);
}
else{
	__method.removeCSS(1);
	// 输入框焦点切换到开始时间 __method.changeInput(__method.startDateId);
}
//用户点击默认自动提交 added by johnnyzheng 12-08__method.close(1);
	__method.mOpts.success({
	'startDate':$('#' + __method.mOpts.startDateId).val(),'endDate':$('#' + __method.mOpts.endDateId).val(),'needCompare':$('#' + __method.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + __method.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + __method.mOpts.endCompareDateId).val()}
);
}
);
	// 初始化开始 this.init();
	// 关闭日期选择框，并把结果反显到输入框 this.close(1);
	if(this.mOpts.replaceBtn && $('#'+this.mOpts.replaceBtn).length > 0){
	$('#'+ __method.compareCheckboxId).hide();
	$('.contrast').hide();
	$('#'+this.mOpts.replaceBtn).bind('click',function(){
	var self = this;
	$('#'+ __method.compareCheckboxId).attr('checked')? $('#'+ __method.compareCheckboxId).removeAttr('checked'):$('#'+ __method.compareCheckboxId).attr('checked','checked');
	$('#'+ __method.compareCheckboxId).click();
	$('#'+ __method.compareCheckboxId).attr('checked')? function(){
	$('#'+ __method.compareCheckboxId).removeAttr('checked');
	$('.contrast').hide();
	$(self).text('按时间对比');
}
():function(){
	$('#'+ __method.compareCheckboxId).attr('checked','checked');
	$('.contrast').show();
	$(self).text('取消对比');
}
();
}
);
}
if(this.mOpts.autoCommit){
	this.mOpts.success({
	'startDate':$('#' + __method.mOpts.startDateId).val(),'endDate':$('#' + __method.mOpts.endDateId).val(),'needCompare':$('#' + __method.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + __method.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + __method.mOpts.endCompareDateId).val()}
);
}
//让用户点击页面即可关闭弹窗 $(document).bind('click',function (){
	__method.close();
}
);
}
;
	/** * @description 日期选择器的初始化方法，对象原型扩展 * @param{
	Boolean}
isCompare 标识当前初始化选择面板是否是对比日期 */
pickerDateRange.prototype.init = function(isCompare){
	var __method = this;
	var minDate,maxDate;
	var isNeedCompare = typeof(isCompare) != 'undefined'? isCompare && $("#" + __method.compareCheckboxId).attr('checked'):$("#" + __method.compareCheckboxId).attr('checked');
	// 清空日期列表的内容 $("#" + this.dateListId).empty();
	// 如果开始日期为空，则取当天的日期为开始日期 var endDate = '' == this.mOpts.endDate ? (new Date()):this.str2date(this.mOpts.endDate);
	// 日历结束时间 this.calendar_endDate = new Date(endDate.getFullYear(),endDate.getMonth() + 1,0);
	//如果是magicSelect 自定义年和月份，则自定义填充日期if(this.mOpts.magicSelect && this.mOpts.theme == 'ta'){
	var i = 0;
	do{
	var td = null;
	if(i==0){
	td = this.fillDate(this.str2date($('#'+this.endDateId).val()).getFullYear(),this.str2date($('#'+this.endDateId).val()).getMonth(),i);
	$("#" + this.dateListId).append(td);
}
else{
	td = this.fillDate(this.str2date($('#'+this.startDateId).val()).getFullYear(),this.str2date($('#'+this.startDateId).val()).getMonth(),i);
	var firstTd = (this.mOpts.theme == 'ta' ? $("#" + this.dateListId).find('table').get(0):$("#" + this.dateListId).find('td').get(0));
	$(firstTd).before(td);
}
i++;
}
while(i<2);
	// 日历开始时间this.calendar_startDate = new Date(this.str2date($('#'+this.startDateId).val()).getFullYear(),this.str2date($('#'+this.startDateId).val()).getMonth(),1);
}
else{
	// 计算并显示以 endDate 为结尾的最近几个月的日期列表for(var i = 0;
	i < this.mOpts.calendars;
	i ++){
	var td = null;
	if(this.mOpts.theme == 'ta'){
	td = this.fillDate(endDate.getFullYear(),endDate.getMonth(),i);
}
else{
	td = document.createElement('td');
	$(td).append(this.fillDate(endDate.getFullYear(),endDate.getMonth(),i));
	$(td).css('vertical-align','top');
}
if(0 == i){
	$("#" + this.dateListId).append(td);
}
else{
	var firstTd = (this.mOpts.theme == 'ta' ? $("#" + this.dateListId).find('table').get(0):$("#" + this.dateListId).find('td').get(0));
	$(firstTd).before(td);
}
endDate.setMonth(endDate.getMonth() - 1,1);
}
// 日历开始时间this.calendar_startDate = new Date(endDate.getFullYear(),endDate.getMonth() + 1,1);
}
// 上一个月 $('#' + this.preMonth).bind('click',function(){
	__method.calendar_endDate.setMonth(__method.calendar_endDate.getMonth() - 1,1);
	__method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-');
	__method.init(isCompare);
	//如果是单月选择的时候，要控制input输入框 added by johnnyzheng 2011-12-19if(1 == __method.mOpts.calendars){
	if('' == $('#' + __method.startDateId).val()){
	__method.changeInput(__method.startDateId);
}
else{
	__method.changeInput(__method.endDateId);
}
}
return false;
}
);
	// 下一个月 $('#' + this.nextMonth).bind('click',function(){
	__method.calendar_endDate.setMonth(__method.calendar_endDate.getMonth() + 1,1);
	__method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-');
	__method.init(isCompare);
	//如果是单月选择的时候，要控制input输入框 added by johnnyzheng 2011-12-19if(1 == __method.mOpts.calendars){
	if('' == $('#' + __method.startDateId).val()){
	__method.changeInput(__method.startDateId);
}
else{
	__method.changeInput(__method.endDateId);
}
}
return false;
}
);
	//如果有用户自定义选择月份，则为其绑定事件if(this.mOpts.magicSelect) this.bindChangeForSelect();
	// 初始化时间选区背景 if(this.endDateId != this.dateInput && this.endCompareDateId != this.dateInput){
	(isNeedCompare && typeof(isCompare) !='undefined') ? this.addCSS(1):this.addCSS(0);
}
if(isNeedCompare && typeof(isCompare) !='undefined'){
	__method.addCSS(1);
}
else{
	__method.addCSS(0);
}
// 隐藏对比日期框$('#' + __method.inputCompareId).css('display',isNeedCompare ? '':'none');
	$('#' + this.compareInputDiv).css('display',$('#' + this.compareCheckboxId).attr('checked') ? '':'none');
	//昨天，今天，最近7天，最近30天快捷的点击，样式要自己定义，id可以传递默认，也可覆盖for(var property in __method.periodObj){
	if($('#'+ property).length > 0){
	$('#' + property).unbind('click');
	$('#' + property).bind('click',function(){
	//处理点击样式var cla = __method.mOpts.theme == 'ta' ? 'active':'a';
	$(this).parent().nextAll().removeClass(cla);
	$(this).parent().prevAll().removeClass(cla);
	$(this).parent().addClass(cla);
	//拼接提交时间串var timeObj = __method.getSpecialPeriod(__method.periodObj[$(this).attr('id')]);
	$('#' + __method.startDateId).val(__method.formatDate(timeObj.otherday));
	$('#' + __method.endDateId).val(__method.formatDate(timeObj.today));
	$('#' + __method.mOpts.startDateId).val($('#' + __method.startDateId).val());
	$('#' + __method.mOpts.endDateId).val($('#' + __method.endDateId).val());
	__method.mOpts.theme == 'ta' ? $('#'+__method.compareInputDiv).hide():$('#' + __method.inputCompareId).css('display','none');
	$('#' + __method.compareCheckboxId).attr('checked',false);
	$('#' + __method.mOpts.compareCheckboxId).attr('checked',false);
	$('#' + this.compareInputDiv).css('display',$('#' + this.compareCheckboxId).attr('checked') ? '':'none');
	__method.close(1);
	//于此同时清空对比时间框的时间$('#' + __method.startCompareDateId).val('');
	$('#' + __method.endCompareDateId).val('');
	$('#' + __method.mOpts.startCompareDateId).val('');
	$('#' + __method.mOpts.endCompareDateId).val('');
	$('#' + __method.mOpts.compareCheckboxId).val(0);
	if($('#'+ __method.mOpts.replaceBtn).length > 0){
	$('.contrast').hide();
	$('#'+ __method.mOpts.replaceBtn).text('按时间对比');
}
//点击提交__method.mOpts.success({
	'startDate':$('#' + __method.mOpts.startDateId).val(),'endDate':$('#' + __method.mOpts.endDateId).val(),'needCompare':$('#' + __method.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + __method.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + __method.mOpts.endCompareDateId).val()}
);
}
);
}
}
// 让用户手动关闭或提交日历，每次初始化的时候绑定，关闭的时候解绑 by zacharycai $(document).bind('click',function (){
	__method.close();
}
);
	//完全清空日期控件的值 by zacharycai $('#' + this.inputId).bind('change',function(){
	if ($(this).val() === ''){
	$('#' + __method.startDateId).val('');
	$('#' + __method.endDateId).val('');
	$('#' + __method.startCompareDateId).val('');
	$('#' + __method.endCompareDateId).val('');
}
}
)}
;
	pickerDateRange.prototype.bindChangeForSelect = function(){
	var __method = this;
	//气泡弹窗var _popup = function(btn,ctn,wrap,css){
	css = css || 'open';
	var ITEMS_TIMEOUT = null,time_out = 500;
	function hidePop(){
	$('#' + ctn).removeClass(css);
}
function showPop(){
	$('#' + ctn).addClass(css);
}
function isPopShow(){
	return $('#' + ctn).attr('class') == css;
}
$("#" + btn).click(function(){
	isPopShow() ? hidePop():showPop();
}
).mouseover(function(){
	clearTimeout(ITEMS_TIMEOUT);
}
).mouseout(function(){
	ITEMS_TIMEOUT = setTimeout(hidePop,time_out);
}
);
	$('#' + wrap).mouseover(function(){
	clearTimeout(ITEMS_TIMEOUT);
}
).mouseout(function(){
	ITEMS_TIMEOUT = setTimeout(hidePop,time_out);
}
);
}
;
	//自定义选择的触发动作try{
	$("#" + this.dateListId).find('div[id*="selected"]').each(function(){
	//绑定popvar _match = $(this).attr('id').match(/(\w+)_(\d)/i);
	if(_match){
	var _name = _match[1];
	//名称var _idx = _match[2];
	//下标if(_name=='yselected'){
	_popup('_ybtn_'+_idx,$(this).attr('id'),'_yctn_'+_idx);
}
else if(_name=='mselected'){
	_popup('_mbtn_'+_idx,$(this).attr('id'),'_mctn_'+_idx);
}
$(this).find('li a').each(function(){
	$(this).click(function(){
	var match = $(this).parents('.select_wrap').attr('id').match(/(\w+)_(\d)/i);
	//if(match){
	var name = match[1];
	//名称var idx = match[2];
	//下标var nt = null;
	if(idx^1 == 0){
	//开始if(name == 'yselected'){
	__method.calendar_startDate.setYear($(this).text()*1,1);
	//__method.calendar_startDate.setMonth(__method.str2date($('#'+__method.startDateId).val()).getMonth(),1);
}
else if(name='mselected'){
	//__method.calendar_startDate.setYear(__method.str2date($('#'+__method.startDateId).val()).getFullYear(),1);
	__method.calendar_startDate.setMonth($(this).text()*1-1,1);
}
__method.mOpts.startDate = __method.date2ymd(__method.calendar_startDate).join('-');
	nt = __method.fillDate(__method.calendar_startDate.getFullYear(),__method.calendar_startDate.getMonth(),idx);
}
else{
	//结束if(name == 'yselected'){
	__method.calendar_endDate.setYear($(this).text()*1,1);
	//__method.calendar_endDate.setMonth(__method.str2date($('#'+__method.endDateId).val()).getMonth(),1);
}
else if(name='mselected'){
	//__method.calendar_endDate.setYear(__method.str2date($('#'+__method.endDateId).val()).getFullYear(),1);
	__method.calendar_endDate.setMonth($(this).text()*1-1,1);
}
__method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-');
	nt = __method.fillDate(__method.calendar_endDate.getFullYear(),__method.calendar_endDate.getMonth(),idx);
}
var tb = $("#" + __method.dateListId).find('table').get(idx^1);
	$(tb).replaceWith(nt);
	//}
__method.removeCSS(0);
	__method.bindChangeForSelect();
}
);
}
);
}
}
);
}
catch(e){
	window.console && console.log(e);
}
}
/** * @description 计算今天，昨天，最近7天，最近30天返回的时间范围 * @param{
	Num}
period 快捷选择的时间段，今天、昨天、最近7天、最近30天 */
pickerDateRange.prototype.getSpecialPeriod = function(period){
	var __method = this;
	var date = new Date();
	//如果今天不可用，则从昨天向前推 added by johnnyzheng 12-07(true == __method.mOpts.isTodayValid && ('' != __method.mOpts.isTodayValid) || 2 > period)? '':date.setTime(date.getTime() - ( 1 * 24 * 60 * 60 * 1000));
	var timeStamp = ((date.getTime()- ( period * 24 * 60 * 60 * 1000)) < (__method.mOpts.minValidDate * 1000)) ? (__method.mOpts.minValidDate * 1000):(date.getTime()- ( period * 24 * 60 * 60 * 1000));
	var todayStr = date.getFullYear() + '-' + (date.getMonth()+ 1 ) + '-' + date.getDate();
	date.setTime(timeStamp);
	var otherdayStr = date.getFullYear() + '-' + (date.getMonth()+ 1 ) + '-' + date.getDate();
	if(period == __method.periodObj.aYesterday){
	todayStr = otherdayStr;
}
return{
	today:todayStr,otherday:otherdayStr}
;
}
pickerDateRange.prototype.getCurrentDate = function(){
	return{
	'startDate':$('#' + this.mOpts.startDateId).val(),'endDate':$('#' + this.mOpts.endDateId).val(),'needCompare':$('#' + this.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + this.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + this.mOpts.endCompareDateId).val()}
;
}
;
	/** * @description 移除选择日期面板的样式 * @param{
	Boolean}
isCompare 是否是对比日期面板 * @param{
	String}
specialClass 特殊的样式，这里默认是常规和对比日期两种样式的重合样式 */
pickerDateRange.prototype.removeCSS = function(isCompare,specialClass){
	// 初始化对比时间重合部分的样式类 if('undefined' == typeof(specialClass)){
	specialClass = this.mOpts.theme + '_' + this.mOpts.coincideCss;
}
// 是否移除对比部分的样式:0 日期选择;
	1 对比日期选择 if('undefined' == typeof(isCompare)){
	isCompare = 0;
}
// 整个日期列表的开始日期var s_date = this.calendar_startDate;
	var e_date = this.calendar_endDate;
	//如果是用户自定义选择的话，需要充值样式边界日期if(this.mOpts.magicSelect){
	s_date = this.str2date($('#'+this.startDateId).val());
	e_date = this.str2date($('#'+this.endDateId).val());
}
var bDate = new Date(s_date.getFullYear(),s_date.getMonth(),s_date.getDate());
	var cla = '';
	// 从开始日期循环到结束日期 for(var d = new Date(bDate);
	d.getTime() <= e_date.getTime();
	d.setDate(d.getDate() + 1)){
	if(0 == isCompare){
	// 移除日期样式 cla = this.mOpts.theme + '_' + this.mOpts.selectCss;
}
else{
	// 移除对比日期样式 cla = this.mOpts.theme + '_' + this.mOpts.compareCss;
}
// 移除指定样式 $('#'+ this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(cla);
	$('#'+ this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(this.mOpts.firstCss).removeClass(this.mOpts.lastCss).removeClass(this.mOpts.clickCss);
}
}
;
	/** * @description 为选中的日期加上样式：1=比较时间；0=时间范围 * @param{
	Boolean}
isCompare 是否是对比日期面板 * @param{
	String}
specialClass 特殊的样式，这里默认是常规和对比日期两种样式的重合样式 */
pickerDateRange.prototype.addCSS = function(isCompare,specialClass){
	// 初始化对比时间重合部分的样式类 if('undefined' == typeof(specialClass)){
	specialClass = this.mOpts.theme + '_' + this.mOpts.coincideCss;
}
// 是否移除对比部分的样式:0 日期选择;
	1 对比日期选择 if('undefined' == typeof(isCompare)){
	isCompare = 0;
}
// 获取4个日期 var startDate = this.str2date($('#' + this.startDateId).val());
	var endDate = this.str2date($('#' + this.endDateId).val());
	var startCompareDate = this.str2date($('#' + this.startCompareDateId).val());
	var endCompareDate = this.str2date($('#' + this.endCompareDateId).val());
	// 循环开始日期 var sDate = 0 == isCompare ? startDate:startCompareDate;
	// 循环结束日期 var eDate = 0 == isCompare ? endDate:endCompareDate;
	var cla = '';
	for(var d = new Date(sDate);
	d.getTime() <= eDate.getTime();
	d.setDate(d.getDate() + 1)){
	if(0 == isCompare){
	// 添加日期样式 cla = this.mOpts.theme + '_' + this.mOpts.selectCss;
	$('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(this.mOpts.firstCss).removeClass(this.mOpts.lastCss).removeClass(this.mOpts.clickCss);
	$('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(cla);
}
else{
	// 添加对比日期样式 cla = this.mOpts.theme + '_' + this.mOpts.compareCss;
}
$('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).attr('class',cla);
}
if(this.mOpts.theme == 'ta'){
	//为开始结束添加特殊样式$('#' + this.calendarId + '_' + this.date2ymd(new Date(sDate)).join('-')).removeClass().addClass(this.mOpts.firstCss);
	$('#' + this.calendarId + '_' + this.date2ymd(new Date(eDate)).join('-')).removeClass().addClass(this.mOpts.lastCss);
	//如果开始结束时间相同sDate.getTime() == eDate.getTime() && $('#'+ this.calendarId + '_' + this.date2ymd(new Date(eDate)).join('-')).removeClass().addClass(this.mOpts.clickCss);
}
}
;
	/** * @description 判断开始、结束日期是否处在允许的范围内 * @param{
	String}
startYmd 开始时间字符串 * @param{
	String}
endYmd 结束时间字符串 */
pickerDateRange.prototype.checkDateRange = function(startYmd,endYmd){
	var sDate = this.str2date(startYmd);
	var eDate = this.str2date(endYmd);
	var sTime = sDate.getTime();
	var eTime = eDate.getTime();
	var minEDate,maxEDate;
	if(eTime >= sTime){
	// 判断是否超过最大日期外 maxEDate = this.str2date(startYmd);
	maxEDate.setMonth(maxEDate.getMonth() + this.mOpts.monthRangeMax);
	maxEDate.setDate(maxEDate.getDate() + this.mOpts.dayRangeMax - 1);
	if(maxEDate.getTime() < eTime){
	alert('结束日期不能大于：' + this.date2ymd(maxEDate).join('-'));
	return false;
}
}
else{
	// 判断是否超过最大日期外 //maxEDate = this.str2date(stPartYmd);
	maxEDate = this.str2date(endYmd);
	maxEDate.setMonth(maxEDate.getMonth() - this.mOpts.monthRangeMax);
	maxEDate.setDate(maxEDate.getDate() - this.mOpts.dayRangeMax + 1);
	if(maxEDate.getTime() > eTime){
	alert('开始日期不能小于：' + this.date2ymd(maxEDate).join('-'));
	return false;
}
}
return true;
}
/** * @description 选择日期 * @param{
	String}
ymd 时间字符串 */
pickerDateRange.prototype.selectDate = function(ymd){
	//点击日期点的时候添加对应输入框的样式，而不是之前的 聚焦到输入框时显示样式 by zacharycai this.changeInput(this.dateInput);
	// 格式化日期 var ymdFormat = this.formatDate(ymd);
	// start <-> end 切换 if(this.startDateId == this.dateInput){
	// 移除样式 this.removeCSS(0);
	this.removeCSS(1);
	// 为当前点加样式 $('#'+ this.calendarId + '_' + ymd).attr('class',(this.mOpts.theme == 'ta' ? this.mOpts.clickCss:this.mOpts.theme + '_' + this.mOpts.selectCss));
	// 获取开始时间的初始值this.startDefDate = $('#' + this.dateInput).val();
	// 更改对应输入框的值$('#' + this.dateInput).val(ymdFormat);
	// 切换输入框焦点,如果是实时数据那么选择一天的数据 if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay){
	this.dateInput = this.startDateId;
	$('#' + this.endDateId).val(ymdFormat);
	(this.mOpts.shortOpr || this.mOpts.autoSubmit) && this.close(1);
	this.mOpts.success({
	'startDate':$('#' + this.mOpts.startDateId).val(),'endDate':$('#' + this.mOpts.endDateId).val(),'needCompare':$('#' + this.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + this.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + this.mOpts.endCompareDateId).val()}
);
}
else{
	this.dateInput = this.endDateId;
}
}
else if(this.endDateId == this.dateInput){
	// 如果开始时间未选 if('' == $('#' + this.startDateId).val()){
	this.dateInput = this.startDateId;
	this.selectDate(ymd);
	return false;
}
// 判断用户选择的时间范围 if(false == this.checkDateRange($('#' + this.startDateId).val(),ymd)){
	return false;
}
// 如果结束时间小于开始时间 if(-1 == this.compareStrDate(ymd,$('#' + this.startDateId).val())){
	// 更改对应输入框的值(结束时间) $('#' + this.dateInput).val($('#' + this.startDateId).val());
	// 更改对应输入框的值(开始时间) $('#' + this.startDateId).val(ymdFormat);
	ymdFormat = $('#' + this.dateInput).val();
}
// 更改对应输入框的值 $('#' + this.dateInput).val(ymdFormat);
	// 切换输入框焦点 this.dateInput = this.startDateId;
	this.removeCSS(0);
	this.addCSS(0);
	//this.addCSS(0,this.mOpts.coincideCss);
	this.startDefDate = '';
	if(this.mOpts.autoSubmit){
	this.close(1);
	this.mOpts.success({
	'startDate':$('#' + this.mOpts.startDateId).val(),'endDate':$('#' + this.mOpts.endDateId).val(),'needCompare':$('#' + this.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + this.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + this.mOpts.endCompareDateId).val()}
);
}
}
else if(this.startCompareDateId == this.dateInput){
	// 移除样式 this.removeCSS(1);
	this.removeCSS(0);
	// 为当前点加样式$('#'+ this.calendarId + '_' + ymd).attr('class',(this.mOpts.theme == 'ta' ? this.mOpts.clickCss:this.mOpts.theme + '_' + this.mOpts.compareCss));
	// 获取开始时间的初始值 this.startDefDate = $('#' + this.dateInput).val();
	// 更改对应输入框的值 $('#' + this.dateInput).val(ymdFormat);
	// 切换输入框焦点if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay){
	this.dateInput = this.startCompareDateId;
	$('#' + this.endCompareDateId).val(ymdFormat);
	(this.mOpts.shortOpr || this.mOpts.autoSubmit) && this.close(1);
	this.mOpts.success({
	'startDate':$('#' + this.mOpts.startDateId).val(),'endDate':$('#' + this.mOpts.endDateId).val(),'needCompare':$('#' + this.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + this.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + this.mOpts.endCompareDateId).val()}
);
}
else{
	this.dateInput = this.endCompareDateId;
}
}
else if(this.endCompareDateId == this.dateInput){
	// 如果开始时间未选 if('' == $('#' + this.startCompareDateId).val()){
	this.dateInput = this.startCompareDateId;
	this.selectDate(ymd);
	return false;
}
// 判断用户选择的时间范围 if(false == this.checkDateRange($('#' + this.startCompareDateId).val(),ymd)){
	return false;
}
// 如果结束时间小于开始时间 if(-1 == this.compareStrDate(ymd,$('#' + this.startCompareDateId).val())){
	// 更改对应输入框的值(结束时间) $('#' + this.dateInput).val($('#' + this.startCompareDateId).val());
	// 更改对应输入框的值(开始时间) $('#' + this.startCompareDateId).val(ymdFormat);
	ymdFormat = $('#' + this.dateInput).val();
}
// 更改对应输入框的值 $('#' + this.dateInput).val(ymdFormat);
	// 切换输入框焦点 this.dateInput = this.startCompareDateId;
	//this.addCSS(1,this.mOpts.coincideCss);
	this.removeCSS(1);
	this.addCSS(1);
	this.startDefDate = '';
	if(this.mOpts.autoSubmit){
	this.close(1);
	this.mOpts.success({
	'startDate':$('#' + this.mOpts.startDateId).val(),'endDate':$('#' + this.mOpts.endDateId).val(),'needCompare':$('#' + this.mOpts.compareCheckboxId).val(),'startCompareDate':$('#' + this.mOpts.startCompareDateId).val(),'endCompareDate':$('#' + this.mOpts.endCompareDateId).val()}
);
}
}
// 切换到下一个输入框// this.changeInput(this.dateInput);
}
;
	/** * @description显示日期选择框 * @param{
	Boolean}
isCompare 是否是对比日期选择框 * @param{
	Object}
__method 时期选择器超级对象 */
pickerDateRange.prototype.show = function(isCompare,__method){
	$('#' + __method.dateRangeDiv).css('display',isCompare ? 'none':'');
	$('#' + __method.dateRangeCompareDiv).css('display',isCompare ? '':'none');
	var pos = isCompare ? $('#' + this.inputCompareId).offset():$('#' + this.inputId).offset();
	var offsetHeight = isCompare ? $('#' + this.inputCompareId).height():$('#' + this.inputId).height();
	var clientWidth = parseInt($(document.body)[0].clientWidth);
	var left = pos.left;
	$("#" + this.calendarId).css('display','block');
	if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay){
	$('#' + this.endDateId).css('display','none');
	$('#' + this.endCompareDateId).css('display','none');
	$('#' + this.mOpts.joinLineId).css('display','none');
	$('.' + this.mOpts.joinLineId).css('display','none');
}
// 如果和输入框左对齐时超出了宽度范围，则右对齐 if(0 < clientWidth && $("#" + this.calendarId).width() + pos.left > clientWidth){
	left = pos.left + $('#' + this.inputId).width() - $("#" + this.calendarId).width() + ((/msie/i.test(navigator.userAgent) && !(/opera/i.test(navigator.userAgent)))? 5:0);
	__method.mOpts.theme=='ta' && (left += 50);
}
$("#" + this.calendarId).css('left',left + 'px');
	//$("#" + this.calendarId).css('top',pos.top + (offsetHeight ? offsetHeight- 1:(__method.mOpts.theme=='ta'?35:22)) + 'px');
	$("#" + this.calendarId).css('top',pos.top + (__method.mOpts.theme=='ta'?35:22) + 'px');
	//第一次显示的时候，一定要初始化输入框isCompare ? this.changeInput(this.startCompareDateId):this.changeInput(this.startDateId);
	return false;
}
;
	/** * @description 关闭日期选择框 * @param{
	Boolean}
btnSubmit 是否是点击确定按钮关闭的 */
pickerDateRange.prototype.close = function(btnSubmit){
	var __method = this;
	//by zacharycai 关闭后就解绑了 //$(document).unbind('click');
	// 把开始、结束时间显示到输入框 (PS:如果选择的今日，昨日，则只填入一个日期) // 如果开始和结束同个时间也照样分段by zacharycai //$('#' + this.inputId).val($('#' + this.startDateId).val() + ($('#' + this.startDateId).val() == $('#' + this.endDateId).val() ? '':this.mOpts.defaultText + $('#' + this.endDateId).val()));
	if(btnSubmit){
	//如果是单日快捷选择if (this.mOpts.shortOpr === true){
	$('#' + this.inputId).val($('#' + this.startDateId).val());
	$('#' + this.inputCompareId).val($('#' + this.startCompareDateId).val());
}
else{
	$('#' + this.inputId).val($('#' + this.startDateId).val() + ('' == $('#' + this.endDateId).val() ? '':this.mOpts.defaultText + $('#' + this.endDateId).val()));
}
//判断当前天是否可选，来决定从后往前推修改日期是从哪一点开始var nDateTime = ((true == this.mOpts.isTodayValid && '' != this.mOpts.isTodayValid)) ? new Date().getTime():new Date().getTime() - (1 * 24 * 60 * 60 * 1000);
	var bDateTime = this.str2date($('#' + this.startDateId).val()).getTime();
	var eDateTime = this.str2date($('#' + this.endDateId).val()).getTime();
	//如果endDateTime小于bDateTime 相互交换if(eDateTime < bDateTime){
	var tmp = $('#' + this.startDateId).val();
	$('#' + this.startDateId).val($('#' + this.endDateId).val());
	$('#' + this.endDateId).val(tmp);
}
var _val = this.mOpts.shortOpr == true ? $('#' + this.startDateId).val():($('#' + this.startDateId).val() + ('' == $('#' + this.endDateId).val() ? '':this.mOpts.defaultText + $('#' + this.endDateId).val()));
	// 把开始、结束时间显示到输入框 (PS:如果选择的今日，昨日，则只填入一个日期)var input = document.getElementById(this.inputId);
	if(input && input.tagName == 'INPUT'){
	$('#' + this.inputId).val(_val);
	$('#'+this.inputCompareId).is(':visible') && $('#'+this.inputCompareId).val(_compareVal);
}
else{
	$('#' + this.inputId).html(_val);
	$('#'+this.inputCompareId).is(':visible') && $('#'+this.inputCompareId).html(_compareVal);
}
////在js侧就做好日期校准，以前面的日期选择的跨度为准，如果后面的跨度超过了当前可用时间，则以当前可用时间向前推 added by johnnyzheng 11-29if(this.mOpts.theme != 'ta'){
	if('' != $('#' + this.startCompareDateId).val() && '' != $('#' + this.endCompareDateId).val()){
	var bcDateTime = this.str2date($('#' + this.startCompareDateId).val()).getTime();
	var ecDateTime = this.str2date($('#' + this.endCompareDateId).val()).getTime();
	var _ecDateTime = bcDateTime + eDateTime - bDateTime;
	if(_ecDateTime > nDateTime){
	//如果计算得到的时间超过了当前可用时间，那么就和服务器端保持一致，将当前可用的天数向前推日期选择器的跨度 added by johnnyzheng 11-29_ecDateTime = nDateTime;
	$('#' + this.startCompareDateId).val(this.formatDate(this.date2ymd(new Date(_ecDateTime + bDateTime - eDateTime)).join('-')));
}
$('#' + this.endCompareDateId).val(this.formatDate(this.date2ymd(new Date(_ecDateTime)).join('-')));
	//把开始结束对比时间大小重新矫正一下var bcDateTime = this.str2date($('#' + this.startCompareDateId).val()).getTime();
	var ecDateTime = this.str2date($('#' + this.endCompareDateId).val()).getTime();
	if(ecDateTime < bcDateTime){
	var tmp = $('#' + this.startCompareDateId).val();
	$('#' + this.startCompareDateId).val($('#' + this.endCompareDateId).val());
	$('#' + this.endCompareDateId).val(tmp);
}
}
}
//把对比时间填入输入框 (PS:如果选择今日，昨日，则只填入一个日期)//$('#' + this.inputCompareId).val($('#' + this.startCompareDateId).val() + this.mOpts.defaultText + $('#' + this.endCompareDateId).val());
	var _compareVal = this.mOpts.shortOpr == true ? $('#' + this.startCompareDateId).val():($('#' + this.startCompareDateId).val() + ('' == $('#' + this.endCompareDateId).val() ? '':this.mOpts.defaultText + $('#' + this.endCompareDateId).val()));
	if(input && input.tagName == 'INPUT'){
	$('#' + this.inputCompareId).val(_compareVal);
}
else{
	$('#' + this.inputCompareId).html(_compareVal);
}
// 计算相隔天数var step = (bDateTime - eDateTime) / 86400000;
	// 更改目标元素值$('#' + this.mOpts.startDateId).val($('#' + this.startDateId).val());
	$('#' + this.mOpts.endDateId).val($('#' + this.endDateId).val());
	$('#' + this.mOpts.startCompareDateId).val($('#' + this.startCompareDateId).val());
	$('#' + this.mOpts.endCompareDateId).val($('#' + this.endCompareDateId).val());
	//点击确定按钮进行查询后将取消所有的今天 昨天 最近7天的快捷链接 added by johnnyzheng 11-29for(var property in this.periodObj){
	if($('#' + this.mOpts[property])){
	$('#' + this.mOpts[property]).parent().removeClass('a');
}
}
}
// 隐藏日期选择框 延迟200ms 关闭日期选择框$("#" + __method.calendarId).css('display','none');
	return false;
}
;
	/** * @description 日期填充函数 * @param{
	Num}
year 年 * @param{
	Num}
month 月 */
pickerDateRange.prototype.fillDate = function(year,month,index){
	var __method = this;
	var isTaTheme = this.mOpts.theme == 'ta';
	// 当月第一天 var firstDayOfMonth = new Date(year,month,1);
	var dateBegin = new Date(year,month,1);
	var w = dateBegin.getDay();
	// 计算应该开始的日期 dateBegin.setDate(1 - w);
	// 当月最后一天 var lastDayOfMonth = new Date(year,month + 1,0);
	var dateEnd = new Date(year,month + 1,0);
	w = dateEnd.getDay();
	// 计算应该结束的日期 dateEnd.setDate(dateEnd.getDate() + 6 - w);
	var today = new Date();
	var dToday = today.getDate();
	var mToday = today.getMonth();
	var yToday = today.getFullYear();
	var table = document.createElement('table');
	if(isTaTheme){
	table.className = this.mOpts.dateTable;
	cap = document.createElement('caption');
	//如果是magicSelect，用户自定义的选择年和月份if(this.mOpts.magicSelect){
	var yh = ['<div class="select_wrap" id="yselected_'+index+'"><div class="select" id="_ybtn_'+index+'">'+year+'</div><div class="dropdown" id="_yctn_'+index+'"><ul class="list_menu">']var mh = ['<div class="select_wrap" id="mselected_'+index+'"><div class="select" id="_mbtn_'+index+'">'+(month+1)+'</div><div class="dropdown" id="_mctn_'+index+'"><ul class="list_menu">']//var yh = ['<select name="yselected_'+index+'" class="xxxs">'];
	//var mh = ['<select name="mselected_'+index+'" class="xxxs">'];
	i=1;
	yt = yToday;
	do{
	//yh.push('<option value="'+yt+'" '+(yt == year? 'selected':'')+'>'+(yt--)+'</option>');
	//mh.push('<option value="'+i+'" '+(i == (month+1)? 'selected':'')+'>'+(i++)+'</option>');
	yh.push('<li><a href="javascript:;
	">'+(yt--)+'</a></li>');
	mh.push('<li><a href="javascript:;
	">'+(i++)+'</a></li>');
}
while(i <= 12);
	//yh.push('</select>');
	//mh.push('</select>');
	yh.push('</ul></div></div>');
	mh.push('</ul></div></div>');
	$(cap).append(yh.join('') +'<span class="joinLine"> 年 </span>'+mh.join('')+'<span class="joinLine"> 月 </span>');
}
else{
	$(cap).append(year + '年' + (month + 1) + '月');
}
$(table).append(cap);
	thead = document.createElement('thead');
	tr = document.createElement('tr');
	var days = ['周日','周一','周二','周三','周四','周五','周六'];
	for(var i = 0;
	i < 7;
	i ++){
	th = document.createElement('th');
	$(th).append(days[i]);
	$(tr).append(th);
}
$(thead).append(tr);
	$(table).append(thead);
	tr = document.createElement('tr');
	td = document.createElement('td');
	// 如果是最后一个月的日期，则加上下一个月的链接if(!this.mOpts.magicSelect){
	if(0 == index){
	$(td).append('<a href="javascript:void(0);
	" id="' + this.nextMonth + '"><i class="i_next"></i></a>');
}
// 如果是第一个月的日期，则加上上一个月的链接if(index + 1 == this.mOpts.calendars){
	$(td).append('<a href="javascript:void(0);
	" id="' + this.preMonth + '"><i class="i_pre"></i></a>');
}
}
// $(td).append('<span style="font-size:16px">' + year + '年' + (month + 1) + '月' + '</span>');
	$(td).attr('colSpan',7);
	$(td).css('text-align','center');
	$(tr).append(td);
	$(table).append(tr);
}
else{
	table.className = this.mOpts.theme + '_' + this.mOpts.dateTable;
	tr = document.createElement('tr');
	td = document.createElement('td');
	// 如果是最后一个月的日期，则加上下一个月的链接if(0 == index){
	$(td).append('<a href="javascript:void(0);
	" id="' + this.nextMonth + '" class="gri_dateRangeNextMonth"><span>next</span></a>');
}
// 如果是第一个月的日期，则加上上一个月的链接if(index + 1 == this.mOpts.calendars){
	$(td).append('<a href="javascript:void(0);
	" id="' + this.preMonth + '" class="gri_dateRangePreMonth"><span>pre</span></a>');
}
$(td).append(year + '年' + (month + 1) + '月');
	$(td).attr('colSpan',7);
	$(td).css('text-align','center');
	$(td).css('background-color','#F9F9F9');
	$(tr).append(td);
	$(table).append(tr);
	var days = ['日','一','二','三','四','五','六'];
	tr = document.createElement('tr');
	for(var i = 0;
	i < 7;
	i ++){
	td = document.createElement('td');
	$(td).append(days[i]);
	$(tr).append(td);
}
$(table).append(tr);
}
// 当前月的所有日期(包括空白位置填充的日期) var tdClass = '',deviation = 0,ymd = '';
	for(var d = dateBegin;
	d.getTime() <= dateEnd.getTime();
	d.setDate(d.getDate() + 1)){
	if(d.getTime() < firstDayOfMonth.getTime()){
	// 当前月之前的日期 tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '-1';
}
else if(d.getTime() > lastDayOfMonth.getTime()){
	// 当前月之后的日期 tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '1';
}
else if((this.mOpts.stopToday == true && d.getTime() < today.getTime()) || d.getTime() < __method.mOpts.minValidDate * 1000 || ('' !== __method.mOpts.maxValidDate && d.getTime() > __method.mOpts.maxValidDate * 1000)){
	// 当前时间之后的日期，或者开启统计之前的日期 tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '2';
}
else{
	// 当前月日期 deviation = '0';
	if(d.getDate() == dToday && d.getMonth() == mToday && d.getFullYear() == yToday){
	if (true == this.mOpts.isTodayValid){
	tdClass = this.mOpts.theme + '_' + this.mOpts.isToday;
}
else{
	tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '2';
}
}
else{
	tdClass = '';
}
//让周末不可选不可选if(this.mOpts.weekendDis && (d.getDay()==6 || d.getDay()==0)){
	tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '3';
}
//让周几不可选if(this.mOpts.disCertainDay && this.mOpts.disCertainDay.length > 0 ){
	for(var p in this.mOpts.disCertainDay){
	if(!isNaN(this.mOpts.disCertainDay[p]) && d.getDay() === this.mOpts.disCertainDay[p]){
	tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '4';
}
}
}
//让几号不可选 if(this.mOpts.disCertainDate && this.mOpts.disCertainDate.length > 0 ){
	var isDisabled = false;
	for(var p in this.mOpts.disCertainDate){
	if(!isNaN(this.mOpts.disCertainDate[p]) || isNaN(parseInt(this.mOpts.disCertainDate[p]))){
	if ( this.mOpts.disCertainDate[0] === true ){
	isDisabled = !!(d.getDate() !== this.mOpts.disCertainDate[p]);
	if ( !isDisabled ){
	break;
}
}
else{
	isDisabled = !!(d.getDate() === this.mOpts.disCertainDate[p]);
	if ( isDisabled ){
	break;
}
}
}
}
if ( isDisabled ){
	tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray;
	deviation = '4';
}
}
}
// 如果是周日 if(0 == d.getDay()){
	tr = document.createElement('tr');
}
td = document.createElement('td');
	td.innerHTML = d.getDate();
	if('' != tdClass){
	$(td).attr('class',tdClass);
}
// 只有当前月可以点击 if(0 == deviation){
	ymd = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
	$(td).attr('id',__method.calendarId + '_' + ymd);
	$(td).css('cursor','pointer');
	(function(ymd){
	$(td).bind("click",ymd,function(){
	__method.selectDate(ymd);
	return false;
}
);
}
)(ymd);
}
$(tr).append(td);
	// 如果是周六 if(6 == d.getDay()){
	$(table).append(tr);
}
}
return table;
}
;
	/** * @description 把时间字串转成时间格式 * @param{
	String}
str 时间字符串 */
pickerDateRange.prototype.str2date = function(str){
	var ar = str.split('-');
	// 返回日期格式 return new Date(ar[0],ar[1] - 1,ar[2]);
}
;
	/** * @description 比较两个时间字串的大小:1 大于;
	0 等于;
	-1 小于 * @param{
	String}
b 待比较时间串1 * @param{
	String}
e 待比较时间串2 */
pickerDateRange.prototype.compareStrDate = function(b,e){
	var bDate = this.str2date(b);
	var eDate = this.str2date(e);
	// 1 大于;
	0 等于;
	-1 小于 if(bDate.getTime() > eDate.getTime()){
	return 1;
}
else if(bDate.getTime() == eDate.getTime()){
	return 0;
}
else{
	return -1;
}
}
;
	/** * @description 把时间格式转成对象 * @param{
	Date}
d 时间 */
pickerDateRange.prototype.date2ymd = function(d){
	return [d.getFullYear(),(d.getMonth() + 1),d.getDate()];
}
;
	/** * @description 切换焦点到当前输入框 * @param{
	String}
日期框体ID */
pickerDateRange.prototype.changeInput = function(ipt){
	// 强制修改为开始输入框 if (true == this.mOpts.isSingleDay){
	ipt = this.startDateId;
}
// 所有4个输入框 var allInputs = [this.startDateId,this.startCompareDateId,this.endDateId,this.endCompareDateId];
	// 如果 ipt 是日期输入框，则为日期样式，否则为对比日期样式 var cla = '';
	if(ipt == this.startDateId || ipt == this.endDateId){
	cla = this.mOpts.theme + '_' + this.mOpts.selectCss;
}
else{
	cla = this.mOpts.theme + '_' + this.mOpts.compareCss;
}
if(ipt == this.endDateId && this.mOpts.singleCompare){
	cla = this.mOpts.theme + '_' + this.mOpts.compareCss;
}
// 移除所有输入框的附加样式 for(var i in allInputs){
	$('#' + allInputs[i]).removeClass(this.mOpts.theme + '_' + this.mOpts.selectCss);
	$('#' + allInputs[i]).removeClass(this.mOpts.theme + '_' + this.mOpts.compareCss);
}
// 为指定输入框添加样式 $('#' + ipt).addClass(cla);
	//背景图repeat$('#' + ipt).css('background-repeat','repeat');
	// 把输入焦点移到指定输入框 this.dateInput = ipt;
}
;
	/** * @description 日期格式化，加前导零 */
pickerDateRange.prototype.formatDate = function(ymd){
	return ymd.replace(/(\d{
	4}
)\-(\d{
	1,2}
)\-(\d{
	1,2}
)/g,function(ymdFormatDate,y,m,d){
	if(m < 10){
	m = '0' + m;
}
if(d < 10){
	d = '0' + d;
}
return y + '-' + m + '-' + d;
}
);
}
;

CSS代码(dateRange.css):

/*========== reset ==========*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,hr{margin:0;padding:0;}
body{font:12px/1.6 Tahoma,microsoft yahei,"微软雅黑","宋体";*font-family:"微软雅黑","宋体";}
fieldset,img{border:0;}
address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
select,input,label,button,textarea{margin:0;padding:0;font:normal normal normal "微软雅黑",arial,Simsun,Arial Unicode MS,Mingliu,Arial;overflow:visible;}
input{padding:2px 0 1px;*padding:4px 0 0;_padding:4px 0 0;_height:21px;}
/*** GRI主题*/
.gri_contrast{float:left;margin:4px 8px 0 8px;line-height:20px;color:#666;cursor:pointer;font:12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif;}
.gri_date{/* margin:4px 4px;*/
 padding:0 26px 0 6px;width:195px;height:20px;line-height:20px;border:1px solid #D6D6D6;background:#FFF url('./images/icon_date.png') no-repeat 100% 50%;cursor:pointer;color:#666;}
.gri_date_month{width:180px}
.gri_dateRangeCalendar{position:absolute;display:none;background:#FFF;border:1px solid #6FB1DF;padding:10px;-moz-box-shadow:0px 1px 3px #6FB1DF;filter:progid:DXImageTransform.Microsoft.Shadow(Strength = 5,Direction = 135,Color = "#CCCCCC");font:12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif;}
.gri_dateRangeCalendar a{color:#369;}
.gri_dateRangePicker{float:left;border:0;margin:0;padding:0;}
.gri_dateRangeOptions{float:left;}
.gri_dateRangeOptions input.gri_dateRangeInput{width:80px;text-align:center;border:1px solid #DDD;}
.gri_dateRangeOptions div.gri_dateRangeInput{margin-bottom:5px;}
.gri_dateRangePreMonth{float:left;width:15px;height:17px;background:url('./images/page.png') no-repeat 0 0;overflow:hidden;}
.gri_dateRangeNextMonth{float:right;width:15px;height:17px;background:url('./images/page.png') no-repeat -15px 0;overflow:hidden;}
.gri_dateRangePreMonth span,.gri_dateRangeNextMonth span{display:none;}
.gri_dateRangeDateTable{margin:0 10px 0 0px;padding:0px;float:left;empty-cells:show;border-collapse:collapse;display:inline;font-size:12px;}
.gri_dateRangeDateTable td{border:1px solid #EEE;text-align:right;cursor:pointer;padding:1px 2px;}
.gri_dateRangeDateTable th{border-top:1px solid #DEE6F6;border-left:1px solid #DEE6F6;background:#E0E8F7;font-weight:400;border-left:1px solid #DDD;}
.gri_dateRangeDateTable td.gri_dateRangeGray{color:#BBB;cursor:default;}
.gri_dateRangeDateTable td.gri_dateRangeToday{color:#F90;font-weight:bold;}
.gri_dateRangeSelected{background-color:#007CD9;color:#FFF;}
.gri_dateRangeCompare{background-color:#B9E078;color:#FFF;}
.gri_dateRangeCoincide{background-color:#FFFFC4;}
.gri_pn{background:url("../img/pn.png") repeat-x scroll 0 -48px #E5E5E5;color:#fff;}
.gri_pnc{background:url("../img/pn.png") repeat-x scroll 0 0 #E5E5E5;}
.gri_co{border:1px solid #999999;box-shadow:0 1px 0 #E5E5E5;cursor:pointer;font-family:Tahoma,'Microsoft Yahei','Simsun';font-size:12px;height:21px;overflow:hidden;vertical-align:middle}
/** * ================================================= * TA主题 * ================================================= */
.ta_date{border:1px solid #d8d8d8;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#fefefe;background-image:-ms-linear-gradient(top,#fafafa,#f5f5f5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#f5f5f5));background-image:-moz-linear-gradient(top,#fafafa,#f5f5f5);background-image:-o-linear-gradient(top,#fafafa,#f5f5f5);background-image:linear-gradient(top,#fafafa,#f5f5f5);background-repeat:repeat-x;float:left;}
.ta_date .date_title{font-family:Arial;font-size:14px;color:#666666;padding:6px 10px;*padding:0px 10px;border-right:1px solid #d8d8d8;vertical-align:middle;cursor:pointer;*zoom:1;}
.ta_date .date_title:before{content:"入住 "}
.ta_date:hover{background-image:none;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
.ta_date .to{padding:0 5px;}
.ta_date .opt_sel{/*====*/
width:30px;height:28px;line-height:28px;display:inline-block;text-align:center;vertical-align:middle;margin-left:-4px;}
.ta_date a.opt_sel:link,.ta_date a.opt_sel:visited{}
.ta_date a.opt_sel:active,.ta_date a.opt_sel:hover{}
.ta_date .i_orderd{display:inline-block;width:0;height:0;vertical-align:middle;border-top:5px solid #727272;border-right:5px dashed transparent;border-left:5px dashed transparent;font-size:0;content:"";overflow:hidden;*margin-top:10px;}
.ta_calendar2{*width:536px;}
.ta_calendar1{*width:268px;}
.ta_calendar{background-color:#ffffff;font-size:12px;text-align:left;z-index:100;position:absolute;right:0;}
.i_pre,.i_next,.ta_calendar td.ta_dateRangeSelected,.ta_calendar td.first,.ta_calendar td.last,.ta_calendar td.today{/*background:url(http://imgcache.qq.com/bossweb/mta/images/calendar_all.png) no-repeat;*/
background:url(../img/calendar_all.png) no-repeat;cursor:pointer;}
.i_pre,.i_next{width:23px;height:23px;display:inline-block;}
.i_pre{background-position:0 0;}
.i_pre:hover{background-position:-46px 0px;}
.i_next{background-position:-23px 0;}
.i_next:hover{background-position:-69px 0px;}
.ta_calendar td.ta_dateRangeSelected{background:#cbe6f5;}
.ta_calendar td.ta_dateRangeGray{color:#BBB;cursor:default;}
.ta_calendar td.first,.ta_calendar td.today{background:#4eb5f7;}
.ta_calendar td.first:after,.ta_calendar td.today:after{content:"入住";display:block;font-size:10px;color:#fff;}
.ta_calendar td.last{background:#4eb5f7;}
.ta_calendar td.last:after{content:"离店";display:block;font-size:10px;color:#fff;}
.ta_calendar .dis{color:#9e9e9e;}
.ta_calendar table{font-size:12px;_display:inline;border-spacing:0 7px;border-collapse:collapse;width:100%;}
.ta_calendar table caption{text-align:center;height:40px;line-height:40px;font-size:14px;box-shadow:0px 1px 1px rgba(0,0,0,0.1);}
.ta_calendar table thead tr{background:#fff;}
.ta_calendar table thead th{cursor:pointer;text-align:center;height:40px;}
.ta_calendar table.calendar-month{font-size:12px;float:left;margin:0 8px;_display:inline;border-spacing:7px;border-collapse:separate;margin-bottom:10px;}
.calendar-month caption{border-bottom:1px solid #E1E1E1;*padding-bottom:0px;}
.calendar-month tbody td{line-height:30px;padding:4px 11px;text-align:center;white-space:nowrap;font-family:"΢���ź�";cursor:pointer;}
.calendar-month td.hover,.calendar-month td:hover,.calendar-month caption span:hover{background:#;color:#6590c1;border:1px solid #6590c1;padding:3px 10px;border-radius:2px;cursor:pointer;}
.calendar .dis:hover{color:#9e9e9e;border:1px solid #d3d5d6;padding:3px 10px;}
.calendar-month td.current{background:#6590c1;color:#fff;border-radius:2px;}
.ta_calendar table thead th.sun{color:#999;}
.ta_calendar table thead th.sat{color:#999;}
.ta_calendar table td:first-child{height:0px;}
.ta_calendar table tbody td{text-align:center;white-space:nowrap;font-family:"Tahoma";background:#edf8fe;height:40px;width:14%;border:1px solid #fff;}
.ta_calendar_cont{position:relative;}
.ta_calendar_cont .i_pre,.ta_calendar_cont .i_next{position:absolute;top:7px;}
.ta_calendar_cont .i_pre{left:10px;}
.ta_calendar_cont .i_next{right:10px;}
.ta_calendar_footer{border-top:1px solid #e5e5e5;background:#fafafa;padding-top:6px;height:34px;}
.ta_calendar_footer .frm_btn{float:right;}
.ta_calendar_footer .frm_msg{float:left;vertical-align:middle;}
.ta_calendar_footer .ipt_text_s{padding:4px 4px;}
.ta_ipt_text,.ta_ipt_textarea,.ta_ipt_text_s{border:1px solid #CCCCCC;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555555;font-size:12px;height:16px;line-height:16px;padding:6px 4px;position:relative;transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;vertical-align:middle;width:180px;z-index:2;}
.ta_ipt_text_s{width:80px;}
.ta_btn{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background-color:#F5F5F5;background-image:-moz-linear-gradient(center top,#FEFEFE,#F5F5F5);background-repeat:repeat-x;border-color:#CACACA #CACACA #B3B3B3;border-image:none;border-radius:2px 2px 2px 2px;border-style:solid;border-width:1px;box-shadow:0 1px 0 rgba(0,0,0,0.05);color:#333333;cursor:pointer;display:inline-block;font-family:"΢���ź�","����";font-size:12px;line-height:20px;margin-bottom:0;outline:0 none;padding:3px 12px;text-align:center;}
.ta_btn:hover,.ta_btn:active,.ta_btn.active,.ta_btn.disabled,.ta_btn[disabled]{color:#333333;}
.ta_btn:hover{background-color:#FEFEFE;background-image:none;color:#333333;text-decoration:none;transition:background-position 0.1s linear 0s;}
.ta_btn:focus{outline:thin dotted #333333;outline-offset:-2px;}
.ta_btn.active,.ta_btn:active{background-color:#E6E6E6;background-image:none;box-shadow:0 2px 4px rgba(0,0,0,0.15) inset,0 1px 2px rgba(0,0,0,0.05);outline:0 none;}
.ta_btn.disabled,.ta_btn[disabled]{background-color:#E6E6E6;background-image:none;box-shadow:none;cursor:default;opacity:0.65;}
.ta_btn{margin:0px 5px 0 0;vertical-align:top;}
.ta_btn:hover{background-position:0 -16px;}
.ta_btn_primary{background-color:#B4D66F;background-image:-moz-linear-gradient(center top,#C7E184,#A2CC59);border:1px solid #88AB4A;color:#56740F;}
.ta_btn_primary:hover{background-color:#5C96DB;background-image:-moz-linear-gradient(center top,#74A5ED,#4789CD);border:1px solid #286AB1;color:#FFFFFF;}
.cf:after{clear:both;}
.cf:before,.cf:after{content:"";display:table;}
.cf:before,.cf:after{content:"";display:table;}

附件:下载该文件资源,减少时间成本(增值服务)