自定义日期范围滑块

时间:2015-10-07 15:29:43

标签: javascript jquery jquery-ui jquery-ui-datepicker momentjs

我正在制作一个基于this line的github存储库的自定义日期范围滑块。他的原始版本很棒,但只允许用户以一种方式而不是另一种方式拖动范围滑块。它也有一些我正在尝试制作的错误。

我已将代码上传到webangelo(如果看到灰色圆圈,请运行几次)。最初滑块只有东部手柄所以我把它改为西部和 obj.didResizeBar = function(e, ui) { var prevRangeWidth = obj.rangeWidth(); var rangeWidth = prevRangeWidth; var resizeBarPos = obj.calendarObj.find('.range-bar').position(); var resizeBarWidth = obj.calendarObj.find('.range-bar').outerWidth(); var resizeBarRight = resizeBarPos.left+resizeBarWidth; var cellWidth = $(obj).find(".cell").first().outerWidth(); var lastCellPos = $(obj).find(".cell").last().position(); var deltaWidth = 0; var objWidth = (lastCellPos.left+cellWidth); if(resizeBarRight > objWidth){ deltaWidth = objWidth-resizeBarWidth; prevRangeWidth = (resizeBarWidth-deltaWidth)/cellWidth; } obj.calendarObj.find('.cell').removeClass("selected"); obj.calendarObj.find('.cell').removeClass("last"); obj.calendarObj.find('.cell.start').addClass("selected"); obj.calendarObj.find('.cell.start').nextAll().slice(0, (!rangeWidth ? obj.minRangeWidth-1 : rangeWidth-1)).addClass('selected'); obj.calendarObj.find('.cell.selected').last().addClass("last"); obj._dispatchEvent(obj.changeRangeCallback, obj.range(), obj); }, 。该事件发生在didResizeBar代码中:

maxRangeWidth: 7,

现在的问题是它没有更新左侧突出显示的日期。

我一直在尝试检测拉动西条的变化,但我试过的delta x和y变量(删除后的代码)具有与向东拉动相同的值。

如果BatchData.Values.Any(x=>x.batchNumber == "x");范围栏延伸出来,您也可以从左侧或右侧开始。

有没有办法检测西侧栏的变化,如果拔出西侧栏,是否可以将起始级别从当前更改为左侧?

是否也可以检测它是否到达最后一个单元格,因此无法延伸到最后一个日期位置?

0 个答案:

没有答案