Question

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

我被困住了，我的自定义版本在http://ngrdanjski.com/calendar/上我正在寻找帮助！

我添加了：

默认情况下，所有天都是禁用的。
您可以添加价格期，在此日期期内您已启用预订。
我想在预订范围的第一天第一次单击时添加选项，第二次单击是预订范围的最后一天。现在，当点击日期时，您启用了开始日期/第一天，但是当您单击日期中的第二次以选择结束日期时，它又是开始日期/第一天。我将无法选择开始日期和结束日期。第一次点击是开始，第二次是结束。

当前行为的代码为：

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
        },
    });

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

                }
            });

Javascript预订年日历

1 个答案: