Select2 下拉问题。如何将日期选择器中的日期填充到 select2 下拉列表中？

Question

我是运行Select2 版本3.5.3。 select输入日期后，我无法将日期附加到 select2 输入控件。鉴于我正在动态创建这些输入，实现此目标的正确方法是什么？为了更好地解释我在做什么，我有两个带有日期选择器的输入。此外，我还将它们作为 select2。我用硬编码对象初始化 select2。每次我 select 下拉菜单中的选项 calendar 时，日期选择器都会打开并让我 select 一个日期。一旦有了日期，我就会尝试将日期作为字符串获取并将其附加到同一个下拉列表中。当我这样做时，我可以确认字符串日期是一个有效的字符串。我不知道如何将此字符串附加到 select2，因为我打开了大约 50 个选项卡和 select2 文档。因此，我希望有人可以澄清为什么不附加新的选项和价值。 $input2 与 $input 相同，但由于描述的问题，我没有进一步开发。

const dateRangeFilterOptions = [
                {id: "@calendar", text: "Calendar"},
                { id: "@thisDay", text: "Today" },
                { id: "@thisDay-1", text: "Yesterday" },
                { id: "@thisDay-7,@thisDay", text: "Last 7 days"  },
                { id: "@thisDay-14,@thisDay", text: "Last 14 days" },
                { id: "@thisMonth", text: "This month" },
                { id: "@thisDay-30,@thisDay", text: "Last 30 days" },
                { id: "@thisDay-60,@thisDay", text: "Last 60 days" }
            ]; 
            $input.addClass("datePicker dateFilter");
            const datepickerOptions: DatepickerOptions = {
                clearBtn: true,
                todayHighlight: true,
            };
            $input.datepicker(datepickerOptions);
            const $input2: JQuery = $("<input type='text'>")
                .attr("id", addlFilter.FilterId)
                .attr("data-id", `${addlFilter.FilterId}End`)
                .addClass(
                    `form-control input-sm datePicker dateFilter addlFilter2 ${addlFilter.QueueKeys.join(" ")}`);
            $input2.datepicker(datepickerOptions);
            const $row: JQuery = $("<div class='row'></div>");
            const $colMd6: JQuery = $("<div class='col-md-6' style='padding-right:2px'></div>");
            const colMd6: JQuery = $("<div class='col-md-6' style='padding-left:2px'></div>");

            $input.prop("placeholder", "Start Date");
            $input2.prop("placeholder", "End Date");
            $input.appendTo($colMd6);
            $input2.appendTo(colMd6);
            $colMd6.appendTo($row);
            colMd6.appendTo($row);
            $row.appendTo($formGroup);
            var dateSelected = "";

            $input.select2({
                placeholder: "Select a date",
                multiple: false,
                minimumResultsForSearch: -1,
                data: dateRangeFilterOptions
            }).on("change", function (e) {
                var el = $(this);
                if (el.val() === "@calendar") {
                    $input.datepicker("show");
                    $input.datepicker()
                        .on('changeDate', function (date: any) {
                            if (date.date.toString() === "") {
                                dateSelected = "";
                            } else {
                                dateSelected = date.date.toString();
                                var newOption = new Option(dateSelected, "@calendarDate", false, false);
                                $input.append(newOption).trigger('change');
                            }
                        });
                }

                });

            $input2.select2({
                placeholder: "Select a date",
                multiple: false,
                minimumResultsForSearch: -1,
                data: dateRangeFilterOptions
            });

Answer 1

尝试不同的方法后，事实证明，对于版本 < 4.00，更新 select2 的方法是更新其数据：属性。在我的例子中，它是对象数组。这样做会将一个新的选项和值附加到 select2 下拉列表中。

Select2 下拉问题。如何将日期选择器中的日期填充到 select2 下拉列表中？

Select2 dropdown issue. How do i populate a date from datepicker into a select2 dropdown?

javascript

jquery

jquery-select2

bootstrap-datepicker