easyui扩展-日期范围选择.

参考: http://www.5imvc.com/Rep

https://github.com/dangrossman/bootstrap-daterangepicker



* 特性:
* (1)基本功能->支持日期范围选取
* (2)右边日期必须大于左边,否则无法'确认'提交.
(2.1)左边日历选中某个日期后,右边日历会计算可以选择的日期. 不能选择的日期颜色呈灰色.
(2.2)'确定'时会再次判断左边日期是否小于右边. 若不满足会对右边日历对应文本框进行变色提示.
* (3)支持required验证.继承自easyui validatebox .

基于[jQuery EasyUI 1.4.2],暂时使用的easyloader加载,测试的.

|-jquery-easyui-1.4.2

|-my

|-easyloader_daterangebox.html

|-plugins

|-jquery.daterangebox.js

|-jquery.combo - 副本.js

|-jquery.combo.js

|-src

|-easyloader.js

|-themes

|-default

|-daterangebox.css

|-easyloader.js

|-easyloader - 副本.js

在plugins目录下新增文件 jquery.daterangebox.js

/**
* jQuery EasyUI 1.4.2
*
* Copyright (c) 2009-2015 www.jeasyui.com. All rights reserved.
*
* Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt * To use it on other terms please contact us at info@jeasyui.com
*
*/

(function($){

/**
* Add:
*/
function createRoot(target){

var state = $.data(target, 'daterangebox');
var opts = state.options;

//Add:
var leftRoot, rightRoot;

//

if (!state.topbar){
var panel = $(target).combo('panel').css('overflow','hidden');
state.topbar = $('<table cellspacing="0" cellpadding="0" style="width:100%;"><tr></tr></table>').appendTo(panel);
var tr = state.topbar.find('tr');
var td1 = $('<td></td>').appendTo(tr).css('width', '60%');
var td2 = $('<td></td>').appendTo(tr).css('width', '40%');

//td1 ->
state.leftInput = $('<input>'), state.rightInput = $('<input>');
$.each([state.leftInput, state.rightInput],function(i, n){
if(i==1){
$('<span>-</span>').css({'margin': '0 5px'}).appendTo(td1);
}
n.css('width',80).appendTo(td1);
n.textbox();
n.textbox('readonly',true);
});

//td2 ->
state.zConfirmBtn = $('<a href="javascript:void(0);">确定</a>'),
state.zCancelBtn = $('<a href="javascript:void(0);">取消</a>');
$.each([state.zConfirmBtn,state.zCancelBtn],function(i,n){
n.css({'float': 'right','width': '60px'}).appendTo(td2);
n.linkbutton();
});

state.zConfirmBtn.on('click', function(){
var lv = state.leftInput.textbox('getValue');
var rv = state.rightInput.textbox('getValue');
if( lv!='' && rv!='' ){
var lt = new Date(lv.replace(/-/g,'/')).getTime(),
rt = new Date(rv.replace(/-/g,'/')).getTime();
if( rt >= lt ){
$(target).combo('setValue', lv+' - '+rv).combo('setText', lv+' - '+rv);
//
$(target).combo('hidePanel');
}else{
state.rightInput.textbox('textbox').parent('span').addClass('daterangebox-alert-border');
}
}
});
state.zCancelBtn.on('click', function(){
$(target).combo('hidePanel');
});
}

/**
* if the calendar isn't created, create it.
* 创建日历
*/
if (!state.calendar){

var panel = $(target).combo('panel').css('overflow','hidden');

//Add:
leftRoot = $('<div class="daterangebox-calendar-left"></div>').css('float','left').appendTo(panel);

//Update:
var cc = $('<div class="daterangebox-calendar-inner"></div>').prependTo(leftRoot);

state.calendar = $('<div></div>').appendTo(cc).calendar();

$.extend(state.calendar.calendar('options'), {
fit:true,
//border:false,
border:true,
onSelect:function(date){
var target = this.target;
var opts = $(target).daterangebox('options');
setValueLeft(target, opts.formatter.call(target, date));

//点击日历后,隐藏日历面板.
//$(target).combo('hidePanel');

opts.onSelect.call(target, date);
}
});
}

//state.calendar
if (!state.calendarRight){

var panel = $(target).combo('panel').css('overflow','hidden');

//Add:
rightRoot = $('<div class="daterangebox-calendar-right"></div>').css('float','left').appendTo(panel);

//Update:
var cc = $('<div class="daterangebox-calendar-inner"></div>').prependTo(rightRoot);

state.calendarRight = $('<div></div>').appendTo(cc).calendar();

$.extend(state.calendarRight.calendar('options'), {
fit:true,
//border:false,
border:true,
onSelect:function(date){
var target = this.target;
var opts = $(target).daterangebox('options');
setValueRight(target, opts.formatter.call(target, date));

//点击日历后,隐藏日历面板.
//$(target).combo('hidePanel');

opts.onSelect.call(target, date);
}
});
}

}

/**
* create date box
*/
function createBox(target){

var state = $.data(target, 'daterangebox');
var opts = state.options;

//在'onShowPanel'触发时会执行一系列的函数.
$(target).addClass('daterangebox-f').combo($.extend({}, opts, {
onShowPanel:function(){
//bindEvents(this);
//setButtons(this);
setCalendar(this);
setValue(this, $(this).daterangebox('getText'), true);
opts.onShowPanel.call(this);
},
required:true
}));
//
$(target).combo('textbox').attr('readonly',true);

createRoot(target);

$(target).combo('textbox').parent().addClass('daterangebox');
//$(target).daterangebox('initValue', opts.value);

//
function setCalendar(target){
var panel = $(target).combo('panel');

var leftDiv = panel.children('div.daterangebox-calendar-left');
var rightDiv = panel.children('div.daterangebox-calendar-right');

var cc = $(leftDiv).children('div.daterangebox-calendar-inner');
var ccRight = $(rightDiv).children('div.daterangebox-calendar-inner');

//_outerWidth 在jquery.parser.js中有定义.
//panel.children()._outerWidth(panel.width());
panel.children().not('table')._outerWidth(panel.width()/2);

state.calendar.appendTo(cc);
state.calendarRight.appendTo(ccRight);

//important
state.calendar[0].target = target;
state.calendarRight[0].target = target;

if (opts.panelHeight != 'auto'){
var height = panel.height();
//panel.children().not(cc).each(function(){
$(leftDiv).children().not(cc).each(function(){
height -= $(this).outerHeight();
});

cc._outerHeight(height);
ccRight._outerHeight(height);

}

state.calendar.calendar('resize');
state.calendarRight.calendar('resize');
}
}

function controlRightCalendar(state, leftTime){
//右边的日期必须大于或等于左边的日期.
state.calendarRight.calendar({
validator: function(date){
if(date.getTime() >= leftTime){
return true;
}
return false;
},
styler: function(date){
if(date.getTime() >= leftTime){
return '';
}
return 'color:#cccccc';
}
});
$.parser.parse(state.calendarRight);
}

function setValueLeft(target, value, remainText){
var state = $.data(target, 'daterangebox');
var opts = state.options;

state.calendar.calendar('moveTo', opts.parser.call(target, value));
state.leftInput.textbox('setValue', value);
//
var leftTime = new Date(value.replace(/-/g, '/')).getTime();
controlRightCalendar(state, leftTime);
}

function setValueRight(target, value, remainText){
var state = $.data(target, 'daterangebox');
var opts = state.options;

state.calendarRight.calendar('moveTo', opts.parser.call(target, value));
state.rightInput.textbox('setValue', value);
state.rightInput.textbox('textbox').parent('span').removeClass('daterangebox-alert-border');
}

/**
*
*/
function setValue(target, value, remainText){
var state = $.data(target, 'daterangebox');
var opts = state.options;
var leftVal = '', rightVal = '';

if(value){
var valArr = value.split(' - ');
leftVal = $.trim(valArr[0]);
rightVal = $.trim(valArr[1]);
}

var leftDate = opts.parser.call(target, leftVal), ld = leftDate;
//
controlRightCalendar(state, new Date(ld.getFullYear()+'/'+(ld.getMonth()+1)+'/'+ld.getDate()).getTime());
state.calendar.calendar('moveTo', leftDate);
state.calendarRight.calendar('moveTo', opts.parser.call(target, rightVal));

}

/**
* 构造方法.
*/
$.fn.daterangebox = function(options, param){

if (typeof options == 'string'){
var method = $.fn.daterangebox.methods[options];
if (method){
//当 method 是"daterangebox"定义的方法是,直接调用.
return method(this, param);
} else {
//否则,调用combo对应的方法.
return this.combo(options, param);
}
}

options = options || {};

return this.each(function(){

var state = $.data(this, 'daterangebox');

if (state){
$.extend(state.options, options);
} else {
//在元素上存放(set)数据. 除了'cloneFrom'方法外,其他地方都是获取(get).
$.data(this, 'daterangebox', {
// 拷贝 $.fn.daterangebox.defaults 数据.
options: $.extend({}, $.fn.daterangebox.defaults, $.fn.daterangebox.parseOptions(this), options)
});
}
//
createBox(this);
});
};

$.fn.daterangebox.methods = {

//测试发现,'options'方法在内部调用非常频繁.
options: function(jq){
var copts = jq.combo('options');
return $.extend($.data(jq[0], 'daterangebox').options, {
width: copts.width,
height: copts.height,
originalValue: copts.originalValue,
disabled: copts.disabled,
readonly: copts.readonly
});
},

//暴露给用户使用的API.获得calendar对象.
calendar: function(jq){	// get the calendar object
return $.data(jq[0], 'daterangebox').calendar;
},

initValue: function(jq, value){
return jq.each(function(){
var opts = $(this).daterangebox('options');
var value = opts.value;
if (value){
//下文有定义'formatter','parser'方法.
value = opts.formatter.call(this, opts.parser.call(this, value));
}
//最终还是会调用'combo'的方法, 并且还调用'setText'方法
$(this).combo('initValue', value).combo('setText', value);
});
},
setValue: function(jq, value){
return jq.each(function(){
//调用本模块定义的'setValue'函数.
setValue(this, value);
});
},
reset: function(jq){
return jq.each(function(){
var opts = $(this).daterangebox('options');
// opts.originalValue -> 来自combo -> 为空字符串.
$(this).daterangebox('setValue', opts.originalValue);
});
}
};

//此方法可提供给子类使用.譬如下面的"$.fn.combo.parseOptions(target)".
$.fn.daterangebox.parseOptions = function(target){
return $.extend({}, $.fn.combo.parseOptions(target), $.parser.parseOptions(target));
};

$.fn.daterangebox.defaults = $.extend({}, $.fn.combo.defaults, {
//panelWidth:180,
panelWidth:400,
panelHeight:'auto',

/*currentText:'Today',
closeText:'Close',*/

formatter:function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return (m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+y;
},
parser:function(s){
if (!s) return new Date();
var ss = s.split('/');
var m = parseInt(ss[0],10);
var d = parseInt(ss[1],10);
var y = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
},

onSelect:function(date){}
});
})(jQuery);

在themes\default目录下新增daterangebox.css文件

.daterangebox-calendar-inner {
height: 180px;
}

.daterangebox-calendar-inner2 {
height: 180px;
}

.daterangebox-calendar-left{}

.daterangebox-calendar-right{}

.daterangebox-alert-border{
border: 1px solid red;
}

.daterangebox-button {
height: 18px;
padding: 2px 5px;
text-align: center;
}
.daterangebox-button a {
font-size: 12px;
font-weight: bold;
text-decoration: none;
opacity: 0.6;
filter: alpha(opacity=60);
}
.daterangebox-button a:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
.daterangebox-current,
.daterangebox-close {
float: left;
}
.daterangebox-close {
float: right;
}
.daterangebox .combo-arrow {
background-image: url('images/datebox_arrow.png');
background-position: center center;
}
.daterangebox-button {
background-color: #F4F4F4;
}
.daterangebox-button a {
color: #444;
}

需要修改一些文件.

将src目录下的easyloader.js拷贝到根目录下,作如下修改. 在modules上添加对daterangebox的支持.

var modules = {
//daterangebox:
daterangebox:{
js:'jquery.daterangebox.js',
css:'daterangebox.css',
dependencies:['calendar','combo','linkbutton']
},

在my目录(新增的测试目录)下增加测试文件easyloader_daterangebox.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyuiloader daterangebox</title>

<!-- 1.4.2 -->
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../easyloader.js"></script>

<script type="text/javascript">
//
$(function(){
$('body').css({
'margin':'10px 20px'
});

var input1 = $('<input>').appendTo($('body')).attr('id', 'dd').attr('type','text');

easyloader.locale = "zh_CN";
easyloader.base = "../";
using('daterangebox', function(){
$('#dd').daterangebox();
});
});
</script>
</head>
<body>

</body>
</html>

要让例子程序正确运行,还需要修改下plugin目录下的jquery.combo.js文件. 原因是目前项目用的是低版本1.4.2见博文

src下没有jquery.combo.js的源文件,不过没关系,我已经测试过,直接修改148行.

//_21.panel("panel").show().css({zIndex:($.fn.menu?$.fn.menu.defaults.zIndex++:$.fn.window.defaults.zIndex++),left:-999999});
_21.panel("panel").show().css({zIndex:($.fn.menu?$.fn.menu.defaults.zIndex++:($.fn.window?$.fn.window.defaults.zIndex++:99)),left:-999999});