Javascript 预订年历

Question

我正在寻找具有选择范围功能的年历，但我没有找到。我决定自定义 Bootstrap 年历 - http://www.bootstrap-year-calendar.com/

我卡住了，我的自定义版本在 http://ngrdanjski.com/calendar/ 我正在寻求帮助！

我补充说：

1. 默认情况下禁用所有日期。
2. 您可以添加价格期间，在此日期期间您已启用预订。
3. 我想在第一次点击预订范围的第一天，第二次点击预订范围的最后一天时添加选项。现在，当您单击日期时，您启用了开始日期/第一天，但​​是当您在当天第二次单击要选择结束日期时，它又是开始/第一个日期。我不想有选择开始和结束日期的功能。第一次点击一天是开始，第二次是结束。

当前行为的代码是：

if(this.options.enableRangeSelection) {


                cells.mousedown(function (e) {
                    if(e.which == 1) 
                    {
                        var currentDate = _this._getDate($(this));
                        //console.log(currentDate);

                        if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
                        {
                            _this._mouseDown = true;
                            _this._rangeStart = _this._rangeEnd = currentDate;
                            _this._refreshRange();
                        }
                    }
                });




                cells.mouseenter(function (e) {
                    //console.log(e);
                    if (_this._mouseDown) 
                    {
                        var currentDate = _this._getDate($(this));

                        if(!_this.options.allowOverlap)
                        {
                            var newDate =  new Date(_this._rangeStart.getTime());

                            if(newDate < currentDate) 
                            {
                                var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1);
                                while(newDate < currentDate) 
                                {
                                    if(_this.getEvents(nextDate).length > 0)
                                    {
                                        break;
                                    }

                                    newDate.setDate(newDate.getDate() + 1);
                                    nextDate.setDate(nextDate.getDate() + 1);
                                }
                            }
                            else 
                            {
                                var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() - 1);
                                while(newDate > currentDate)
                                {
                                    if(_this.getEvents(nextDate).length > 0)
                                    {
                                        break;
                                    }

                                    newDate.setDate(newDate.getDate() - 1);
                                    nextDate.setDate(nextDate.getDate() - 1);
                                }
                            }

                            currentDate = newDate;
                        }

                        var oldValue = _this._rangeEnd;
                        _this._rangeEnd = currentDate;

                        if (oldValue.getTime() != _this._rangeEnd.getTime()) 
                        {
                            _this._refreshRange();
                        }
                    }
                });


                /* $(window).mouseup(function (e) {
                    if (_this._mouseDown) 
                    {
                        _this._mouseDown = false;
                        _this._refreshRange();

                        var minDate = _this._rangeStart < _this._rangeEnd ? _this._rangeStart : _this._rangeEnd;
                        var maxDate = _this._rangeEnd > _this._rangeStart ? _this._rangeEnd : _this._rangeStart;

                        _this._triggerEvent('selectRange', { 
                            startDate: minDate, 
                            endDate: maxDate,
                            events: _this.getEventsOnRange(minDate, new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate() + 1))
                        });
                    }
                }); */


            }

网址：https://ngrdanjski.com/calendar/js/bootstrap-year-calendar.js 完整版：https://codepen.io/NGrdanjski/pen/bQGdRb 我没有这个功能的技能，请帮忙。

Tnx！

Answer 1

我稍微编辑了您的代码。我了解您想设置两个日期，即范围的开始和结束，所有这一切都发生在两次点击中。我还添加了检查第二个日期是否在第一个日期之后，如果不是，他们将交换位置，所以较早的日期是 rangeStart。日期存储在 rangeStart 和 rangeEnd 中：

编辑：here's a pen

        cells.mousedown(function (e) {
                if(e.which == 1)
                {
                    var currentDate = _this._getDate($(this));
                    //console.log(currentDate);

                    if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
                    {
            if(!_this._mouseDown) {
              _this._mouseDown = true;
              _this._rangeStart = _this._rangeEnd = currentDate;
              _this._refreshRange();
            }
            else {
              _this._mouseDown = false;
              _this._rangeEnd = currentDate;

              if(_this._rangeEnd.getTime() < _this._rangeStart.getTime()) {
                var tempDate = _this._rangeEnd;
                _this._rangeEnd = _this._rangeStart;
                _this._rangeStart = tempDate;
              }
            //  _this._refreshRange();
            }

                    }

        if(_this._rangeStart != _this._rangeEnd) {
          console.log(_this._rangeStart.getDate() + ',' + _this._rangeEnd.getDate());
        }

                }
            });