參考:?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.calendarif (!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);//importantstate.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 objectreturn $.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});

　　

?

轉載于:https://www.cnblogs.com/juedui0769/p/5120051.html

總結

以上是生活随笔為你收集整理的easyui扩展-日期范围选择.的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。