Я использую Select2 версии 3.5.3. У меня проблемы с добавлением даты в элемент управления вводом select2 после выбора даты. Как правильно достичь этого, учитывая, что я создаю эти входы динамически? Чтобы лучше объяснить, что я делаю, у меня есть два входа с указателями даты. Кроме того, у меня также есть их как select2. Я инициализирую свой select2 жестко закодированным объектом. Каждый раз, когда я выбираю опцию calendar из раскрывающегося списка, открывается средство выбора даты и позволяет мне выбрать дату. Когда у меня есть дата, я пытаюсь получить дату в виде строки и добавить ее к тому же выпадающему списку. Когда я делаю это, я могу подтвердить, что строковая дата является допустимой строкой. Я понятия не имею, как добавить эту строку в 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 $2colMd6: 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($2colMd6);
$colMd6.appendTo($row);
$2colMd6.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
});