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中：

編輯： 這是一支筆

        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());
        }

                }
            });