apeart / paste-apeart master
文件内容
dateRange.js
62 KB
56968 字符
/**
*=======================================================================
*日期选择器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; }, //回调函数，选择日期之后执行何种操作
clear: function (obj) { return true; }, //回调函数，选择日期之后执行何种操作
startDateId: 'vpastestartDate', // 开始日期输入框ID
startCompareDateId: 'startCompareDate', // 对比开始日期输入框ID
endDateId: 'vpasteendDate', // 结束日期输入框ID
endCompareDateId: 'endCompareDate', // 对比结束日期输入框ID
target: '', // 日期选择框的目标，一般为 <form> 的ID值
needCompare: false, // 是否需要进行日期对比
suffix: '', //相应控件的后缀
inputTrigger: 'input_trigger',
compareTrigger: 'compare_trigger',
compareCheckboxId: 'needCompare', // 比较选择框
calendars: 2, // 展示的月份数，最大是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: false,
isTodayValid: true,
weekendDis: false, //灰掉周末不可选。
disCertainDay: [], //不可用的周日期设置数组，如：[1,3]是要周一， 周三 两天不可选，每个周的周一，周三都不可选择。
disCertainDate: [],//不可用的日期设置数组，如:[1,3]是要1号，3号 两天不可选，特别的，[true,1,3]则反之，只有1，3可选，其余不可选。
shortOpr: false, //结合单天日期选择的短操作，不需要确定和取消的操作按钮。
noCalendar: false, //日期输入框是否展示
theme: 'ta', //日期选择器的主题，目前支持 'gri' / 'ta'
magicSelect: false, //用户自定义选择年、月，与{theme:ta}配合使用。
autoCommit: false, //加载后立马自动提交
autoSubmit: false, //没有确定，取消按钮，直接提交
replaceBtn: 'btn_compare'
};
//将对象赋给__method变量
var __method = this;
// ===== 新增：注册实例 =====
window.__pickerRegistry = window.__pickerRegistry || {};
window.__pickerRegistry[inputId] = this;
this.inputId = inputId;
this.inputCompareId = inputId + 'Compare';
this.compareInputDiv = 'div_compare_' + inputId;
// 配置参数
this.mOpts = $.extend({}, defaults, options);
//默认日历参数最大是3
this.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.clearBtn = 'clear_' + 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="确定" />',
' <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">',
'<a id="aRecent7Days" href="javascript:void(0)" >最近7天</a>',
'<a id="aRecent30Days" href="javascript:void(0)" >最近30天</a>',
'<a id="' + this.clearBtn + '" href="javascript:void(0)" >清空</a>',
'<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 johnnyzheng
if (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', 19999);
// 初始化目标地址的元素
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;
});
$('#' + this.clearBtn).bind('click', function () {
__method.close();
__method.clear();
__method.mOpts.clear();
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-06
if (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 johnnyzheng
if (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();
});
};
/**
*
* @param {*} inputId
* @param {*} start
* @param {*} end
* @returns
*/
function setPickerDate(inputId, start, end) {
$('#' + inputId).val(start + ' 至 ' + end);
$('#' + inputId).attr('datas', start);
$('#' + inputId).attr('datae', end);
var picker = window.__pickerRegistry && window.__pickerRegistry[inputId];
if (!picker) return;
// 用实例上真实的 id，不靠拼
$('#' + picker.startDateId).val(start);
$('#' + picker.endDateId).val(end);
// 提交隐藏域
$('#' + picker.mOpts.startDateId).val(start);
$('#' + picker.mOpts.endDateId).val(end);
// 同步 mOpts
picker.mOpts.startDate = start;
picker.mOpts.endDate = end;
}
/**
* @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-19
if (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-19
if (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 () {
//绑定pop
var _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-29
if (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-29
for (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 {Boolean} btnSubmit 是否是点击确定按钮关闭的
*/
pickerDateRange.prototype.clear = function (btnSubmit) {
$('#' + this.inputId).val("");
$('#' + this.startDateId).val("");
$('#' + this.endDateId).val("");
};
/**
* @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);
// }
for (var i of allInputs) {
$('#' + i).removeClass(this.mOpts.theme + '_' + this.mOpts.selectCss);
$('#' + 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;
});
};