jquery - Flatpickr:添加下拉菜单以更改年份

Question

我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。

我需要在日历中有一个下拉列表，以便我可以从该下拉列表中选择一年，然后日历指向那一年。

我动态地给日历元素一个特殊的类.birthDate。我在日历中动态添加了一个下拉列表，如下所示:

var currYear = new Date().getFullYear()

var yearOptions = "";

for(var i =  1960; i <= currYear; i++) {
    var option = "<option value = " +  i + ">" + i + "</option>";
    yearOptions += option;
}

var yearDropdown = "<select class=\"year-dropdown\">" + yearOptions + "</select>";
 $(".birthDate .flatpickr-current-month").append(yearDropdown);

问题是，当我点击它时没有任何反应。我的猜测是有一些 preventDefault 方法可以防止任何点击导致任何操作。然而，当我在单击下拉列表时添加控制台语句时，它会出现在控制台上。

所以我的问题是如何在单击它时打开下拉菜单。请查找问题示例 here .

Answer 1

如果有人有兴趣向 Flatpickr 添加年份下拉选择选项，这是我的解决方案

    // plugin js file
    /**
 * Flatpickr Year Select Plugin.
 * @author Labi Romabravo
 */

/**
 *
 * @returns {Function}
 */
const yearDropdownPlugin = function (pluginConfig) {
    var defaultConfig = {
        text: '',
        theme: "light",
        date: new Date(),
        yearStart: 100,
        yearEnd: 2,

    };

    var config = {};
    for (var key in defaultConfig) {
        config[key] = pluginConfig && pluginConfig[key] !== undefined ? pluginConfig[key] : defaultConfig[key];
    }

    var getYear = function (value) {
        var date = value.split("/");
        return parseInt(date[2], 10);
    }

    var currYear = new Date().getFullYear();
    var selectedYear = getYear(config.date);

    var yearDropdown = document.createElement("select");

    var createSelectElement = function (year) {
        var start = new Date().getFullYear() - config.yearStart;
        var end = currYear + config.yearEnd;

        for (var i = end; i >= start; i--) {
            var option = document.createElement("option");
            option.value = i;
            option.text = i;
            yearDropdown.appendChild(option);
        }
        yearDropdown.value = selectedYear;
    };

    return function (fp) {
        fp.yearSelectContainer = fp._createElement(
            "div",
            "flatpickr-year-select " + config.theme + "Theme",
            config.text
        );

        fp.yearSelectContainer.tabIndex = -1;
        createSelectElement(selectedYear);
        yearDropdown.addEventListener('change', function (evt) {
            var year = evt.target.options[evt.target.selectedIndex].value;
            fp.changeYear(year);
        });

        fp.yearSelectContainer.append(yearDropdown);

        return {
            onReady: function onReady() {
                var name = fp.monthNav.className;               
                const yearInputCollection = fp.calendarContainer.getElementsByClassName(name);
                const el = yearInputCollection[0];
                el.parentNode.insertBefore(fp.yearSelectContainer, el.parentNode.firstChild);
            }
        };
    };
}

export default yearDropdownPlugin
// if (typeof module !== "undefined")
//     module.exports = yearDropdownPlugin;

用法

import yearDropdownPlugin from "@/utils/year_flatpickr_plugin";
var input = document.querySelector("#" + this.containerId);

  this.datepicker = flatpickr(input, {
    plugins: [
      new yearDropdownPlugin({
        date: this.value,
        yearStart: this.yearStart,
        yearEnd: this.yearEnd
      })
    ],
    wrap: true,
    enableTime: false,
    dateFormat: "d/m/Y",
    minDate: this.min
    //mode: "range"
  });

CSS

.flatpickr-current-month .numInputWrapper {
    display: none;
}
.flatpickr-current-month span.cur-month {
    margin-right: 10px;
    width: 85px;
    font-size: 0.75em;
    top: 0px;
    padding-top: 10px;
    padding-right: 2px;
    position: absolute;
    left: 0px;
    font-weight: 600;
    text-align: right;
}
.flatpickr-current-month {
    width: 100px;
}
.flatpickr-year-select {
    background-color:#052f66;
    z-index: 100;
    position: absolute;
    top: 5px;
    right: 70px;
    width: 100px;


}
.flatpickr-year-select select{
    width: 100%;
    height: 24px;
    font-weight: 600;
    outline: 0;
    overflow: hidden;
    background: #ffffff;
    color: #747a80;
    border: #ffffff;
    padding: 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 6px;
}

最终输出