我参考了这段代码，并修改了它的概念，在jquery-ui.js中实现了它。

$("#your_input_element").datepicker({
        yearRange: "c-100:c",
        changeMonth: true,
        changeYear: true,
        monthNames: ["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],
        monthNamesShort: ["Q1(Jan-Feb-Mar)",
                          "Q2(Apr-May-Jun)",
                          "Q3(Jul-Aug-Sep)",
                          "Q4(Oct-Nov-Dec)", "", "", "", "", "", "", "", ""],
        showButtonPanel: true,
        closeText: 'Select',
        onClose: function (dateText, inst) {//after click select or open menu then close
            $(this).val(inst.selectedYear + "-" + 
            inst.settings.monthNamesShort[inst.selectedMonth]);
        },
        beforeShow: function (input, inst) {
            $(input).blur(); // remove focus from input field for a bug where the datepicker menu is shown and cannot be hidden when there is a focus conflict
            if (inst.selectedYear !== 0) {//open datepicker menu not at first time
                $(this).datepicker('option', 'defaultDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            } else {//open datepicker menu at first time
                $(this).datepicker('option', 'defaultDate', new Date(moment().year(), 1, 1));
        }
    }
    }).focus(function () {
        /*$(".ui-datepicker-month").hide();*/
        $(".ui-datepicker-month option").each((idx, ele) => {
            if (parseInt($(ele).val()) >= 4)
                $(ele).hide();
            });
        $(".ui-datepicker-calendar").hide();
        $(".ui-datepicker-current").hide();
        /*$(".ui-datepicker-close").hide();*/
        /*$(".ui-datepicker-prev").hide();
        $(".ui-datepicker-next").hide();*/
        $("#ui-datepicker-div").position({
            my: "left top",
            at: "left bottom",
            of: $(this)
        });
    }).attr("readonly", false);

参考文献：

1. how-to-change-bootstrap-datepicker-month-view-to-display-quarters
2. jquery-ui-datepicker-to-show-year-only