From e87cae217281c33ba471a23bf4f63c40eb955811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=9C=B0=E4=BA=9A=E5=B0=94-IT?= <136627746+Diyar-IT@users.noreply.github.com> Date: Mon, 17 Jun 2024 18:38:53 +0800 Subject: [PATCH] =?UTF-8?q?fix(laydate):=20=E4=BF=AE=E5=A4=8D=E6=97=A5?= =?UTF-8?q?=E6=9C=9F=E8=8C=83=E5=9B=B4=E8=81=94=E5=8A=A8=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E7=82=B9=E5=87=BB=E4=BB=BB=E6=84=8F=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E7=9A=84=E8=BE=B9=E7=BC=98=E6=97=A5=E6=9C=9F=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E5=8F=A6=E4=B8=80=E4=BE=A7=E9=9D=A2=E6=9D=BF=E6=9C=AA?= =?UTF-8?q?=E8=83=BD=E6=AD=A3=E7=A1=AE=E5=88=87=E6=8D=A2=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#2005)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(laydate) * Update laydate.js * refactor(laydate): 改进范围联动模式面板切换，并修复一些边缘情况 * chore(laydate): 优化日期范围联动选择模式中的边缘日期的处理 --------- Co-authored-by: sight <26325820+Sight-wcg@users.noreply.github.com> Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com> --- src/modules/laydate.js | 102 +++++++++++++++++++++++++++++------------ 1 file changed, 72 insertions(+), 30 deletions(-) diff --git a/src/modules/laydate.js b/src/modules/laydate.js index 1920dac8..8cfed9cb 100644 --- a/src/modules/laydate.js +++ b/src/modules/laydate.js @@ -1496,6 +1496,8 @@ //同步头部年月 lay(elemYM[0]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1)); lay(elemYM[1]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1)); + if(!that.panelYM) that.panelYM = {}; + that.panelYM[index] = {year: dateTime.year, month: dateTime.month}; if(options.lang === 'cn'){ lay(elemYM[0]).attr('lay-type', 'year').html(dateTime.year + ' 年') @@ -2155,6 +2157,45 @@ return that; }; + /** + * 判断日期是否存在面板，用于处理日期范围选择的一些边缘情况 + * @param {object} datetime 日期时间对象 + * @param {number} index - 面板索引 + * @returns + */ + Class.prototype.checkPanelDate = function(datetime, index){ + var that = this; + var options = that.config; + // 年月范围选择不需要处理 + if(options.type !== 'date' && options.type !== 'datetime') return; + + var startPanel = index === 0; + var month = datetime.month + 1; // 点击的日期所在月份 + var panelMonth = that.panelYM[index].month + 1; // 当前面板头部月份 + + // 边缘日期的处理 + var firstRenderIndex = that.endState + // 二次点击（一般为结束日期）任意一侧面板时： + // 1. 左侧面板中，点击的月份属于下一个月时，应渲染右侧面板而不是左侧面板; + // 2. 左侧面板中，点击的月份属于上一个月时，应将两个面板都重新渲染(等效点击 prevMonth); + // 3. 右侧面板同理。 + ? function() { + return (startPanel && month > panelMonth) || (!startPanel && month < panelMonth) + ? 1 - index + : index; + }() + // 初次点击（一般为开始日期）任意一侧面板时： + // 1. 让该面板自行切换，以保持日期的「选中状态」在该侧； + // 2. 另一侧面板则根据点击的面板进行响应式切换，以保持左右面板始终为连续月份。 + : index; + + // 为简化实现，只要点击的月份不等于当前面板顶部显示的月份时，就重新渲染两侧面板 + return { + needFullRender: month !== panelMonth, + index: firstRenderIndex + } + } + //选择日期 Class.prototype.choose = function(td, index){ if(td.hasClass(DISABLED)) return; @@ -2246,16 +2287,12 @@ isChange && (options.dateTime = lay.extend({}, that.startDate)); } if (that.rangeLinked) { + // 处理日期范围选择的一些边缘情况 + var checkState = that.checkPanelDate(dateTime, panelIndex); var dateTimeTemp = lay.extend({}, dateTime); - if (panelIndex && !index && !isChange) { // 处理可能出现的联动面板中点击右面板但是判定为开始日期这个时候点击头部的切换上下月第一次没有反应的问题 - // 选择了右面板但是判断之后作为开始时间 - var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub'); - lay.extend(options.dateTime, { - year: YM[0] - ,month: YM[1] - }); - } - that.calendar(dateTimeTemp, panelIndex, isChange ? 'init' : null); + var renderMode = (isChange || (checkState && checkState.needFullRender)) ? 'init' : null; + var panelIdx = checkState ? checkState.index : panelIndex; + that.calendar(dateTimeTemp, panelIdx, renderMode); } else { that.calendar(null, index, isChange ? 'init' : null); } @@ -2407,32 +2444,37 @@ } } ,prevMonth: function(){ - if (that.rangeLinked) { - dateTime = options.dateTime; - } - var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub'); - lay.extend(dateTime, { - year: YM[0] - ,month: YM[1] - }); + // rangeLinked 模式非实时选择日期，不需要同步 options.dateTime，应根据面板显示日期切换 + if(that.rangeLinked){ + var panelYM = that.panelYM[0]; + var YM = that.getAsYM(panelYM.year, panelYM.month, 'sub'); + var dateTimeTemp = lay.extend({}, options.dateTime, that.panelYM[0], {year: YM[0], month: YM[1]}); + that.checkDate('limit').calendar(dateTimeTemp, null, 'init'); + }else{ + var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub'); + lay.extend(dateTime, { + year: YM[0] + ,month: YM[1] + }); - that.checkDate('limit').calendar(null, null, 'init'); - if (!that.rangeLinked) { + that.checkDate('limit').calendar(null, null, 'init'); that.autoCalendarModel.auto ? that.choose(lay(elemCont).find('td.layui-this'), index) : that.done(null, 'change'); } } ,nextMonth: function(){ - if (that.rangeLinked) { - dateTime = options.dateTime; - } - var YM = that.getAsYM(dateTime.year, dateTime.month); - lay.extend(dateTime, { - year: YM[0] - ,month: YM[1] - }); - - that.checkDate('limit').calendar(null, null, 'init'); - if (!that.rangeLinked) { + if(that.rangeLinked){ + var panelYM = that.panelYM[0]; + var YM = that.getAsYM(panelYM.year, panelYM.month); + var dateTimeTemp = lay.extend({}, options.dateTime, that.panelYM[0], {year: YM[0],month: YM[1]}); + that.checkDate('limit').calendar(dateTimeTemp, null, 'init'); + }else{ + var YM = that.getAsYM(dateTime.year, dateTime.month); + lay.extend(dateTime, { + year: YM[0] + ,month: YM[1] + }); + + that.checkDate('limit').calendar(null, null, 'init'); that.autoCalendarModel.auto ? that.choose(lay(elemCont).find('td.layui-this'), index) : that.done(null, 'change'); } }