Question

我使用CLNDR.js lib制作日历，它适用于选择一个日期，但现在我们想通过拖动日历框（日期）来选择日期范围。

正如你在图片中看到的那样，有两个用户可以拖动的句柄，有jquery-ui可拖动但是任何人都可以通过这个来演示或指导我如何实现这个功能或者如果它可以通过CLNDR.js本身任何帮助将不胜感激。

Answer 1

所以我通过使用jquery拖放实现了这一点。每当单击其中一个框时，我都会向其中添加某个类并添加拖动处理程序。然后使盒子可放置以放置手柄。如果您不喜欢jQuery拖放，请使用look。我删除了一些特定于我的项目的细节。我在这里分享的内容主要是用于此拖动功能的核心内容，除了您将看到的某些特定功能。我希望这会有所帮助。

// highlighting the box
   $(this).addClass("bg-white");

// adding drag handlers to the date box
  $(this).append('<div id="dragable-icons" ><span class="pull-left drag-icon" id="left-icon" style="z-index: 999; left:-8px" >' +
                '<i class="fa fa-arrows " aria-hidden="true"></i>' +
                '</span>' +
                '<span class="pull-right drag-icon" id="right-icon" style="z-index: 999; right:-8px">' +
                '<i class="fa fa-arrows" aria-hidden="true" ></i>' +
                '</span></div>')

 // making the icons draggable
            $("#left-icon , #right-icon").draggable({
                containment: ".calendar-rows", scroll: true
            });

 // all the boxes with class '.active' will be droppable (i.e box with 'active' class will be selected by dragging the icons on it)
            $(".day-active").droppable({
                accept: " #right-icon, #left-icon",
                over: function (event, ui) { // when the handle is over a box
                    if($(this).hasClass("day-unavailable")){
                            $(this).removeClass("day-unavailable");
                            $(this).addClass("prev-unavailable");
                        }
                    $(this).addClass("bg-white");
                },
                // drop: when icons dragging icons are dropped on some date box
                drop: function (event, ui) {
                    // if left icon moved then update startDateBox  otherwise endDatebox (calculations)

                    if ($(event.toElement.parentElement).hasClass("pull-left")) {
                        $(ui.draggable).detach().css({top: 25,left: -7}).appendTo(this);
                        startDateBox = $(this)
                    }
                    else {
                        $(ui.draggable).detach().css({top: 25,left: 7}).appendTo(this);
                        endDateBox = $(this)
                    }

                    $('.calendar-rows').find(".bg-white").removeClass("bg-white");
                    $(startDateBox).addClass("bg-white");
                    $(endDateBox).addClass("bg-white");
                    // get all selected boxes
                    datebox = $(".bg-white")
                    len = datebox.length
                    // generateDate(), getDates(), setDateModify() : notes at end of file
                    // selecting all dates between startDate and endDate
                    startdate = generateDate(datebox[0])
                    enddate = generateDate(datebox[len - 1])
                    var dateArray = getDates(new Date(startdate), (new Date(enddate)));
                    var length = dateArray.length;
                    for (i = 1; i < length; i++) {
                        if (parseInt(dateArray[i].getMonth() + 1) > 9) {
                            month = (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        else {
                            month = "0" + (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        if (dateArray[i].getDate() > 9) {
                            date = dateArray[i].getDate()
                        }
                        else {
                            date = "0" + dateArray[i].getDate()
                        }
                        date = dateArray[i].getFullYear() + "-" + month + "-" + date
                        var class_name = ".calendar-day-" + date
                        if ($(class_name).hasClass("day-unavailable")) {
                                $(class_name).removeClass("day-unavailable");
                                $(class_name).addClass("prev-unavailable");
                            }  
                        $(class_name).addClass("bg-white");

                    }
                    setDateModify(startdate, enddate)
                }
            });

添加拖动功能以使用CLNDR.js从日历中选择多个（范围）日期

1 个答案: