如何修改daterangepicker实现仅年月选择及起止月份查询？

我需要用daterangepicker实现仅选择年份和月份的起止查询功能，但当前组件显示了完整的日历界面（包含日期格子），不符合预期的仅年月选择样式。以下是修改后的代码，可实现仅展示年月选择器的效果：

修改后的完整代码 #

$('.ui-datepicker-trigger').click(function () {
    var $td = $(this).closest('td');
    var $inputs = $td.find('input');
    var $startInput = $inputs.eq(0);
    var $endInput = $inputs.eq(1);

    if ($inputs.length >= 2 && $startInput.hasClass('monthRangePicker')) {
        // 初始化年月范围选择器
        $inputs.daterangepicker({
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM',
                separator: ' ~ ',
                applyLabel: '확인',
                cancelLabel: '취소',
                fromLabel: '시작',
                toLabel: '종료',
                weekLabel: 'W',
                daysOfWeek: ['일', '월', '화', '수', '목', '금', '토'],
                monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
            },
            drops: 'auto',
            showDropdowns: true,
            // 关键配置：仅显示年月选择器
            showMonthAndYearOnly: true,
            // 隐藏自定义范围选项（不需要可保留）
            showCustomRangeLabel: false,
            // 可选：设置年份范围限制
            minYear: moment().subtract(10, 'year').year(),
            maxYear: moment().year()
        }).on('apply.daterangepicker', function (ev, picker) {
            $startInput.val(picker.startDate.format('YYYY-MM'));
            $endInput.val(picker.endDate.format('YYYY-MM'));
            // 调整弹窗位置
            var offset = $startInput.offset();
            picker.container.css({
                top: offset.top + $startInput.outerHeight(),
                left: offset.left
            });
        }).on('show.daterangepicker', function (ev, picker) {
            // 调整弹窗位置
            var offset = $startInput.offset();
            picker.container.css({
                top: offset.top + $startInput.outerHeight(),
                left: offset.left
            });
            // 隐藏日历中的日期格子和周标签（确保仅显示年月选择）
            picker.container.find('.calendar-table, .week').hide();
        });

        $inputs.data('daterangepicker').toggle();
    }
});

补充CSS（全局添加） #

如果组件仍显示多余元素，添加以下CSS彻底隐藏日期相关部分：

.drp-calendar .calendar-table,
.drp-calendar .week {
    display: none !important;
}

关键修改说明 #

1. 核心配置：添加showMonthAndYearOnly: true，让组件默认仅展示年月选择下拉框，不显示完整日历
2. 界面优化：隐藏自定义范围标签（showCustomRangeLabel: false），并通过CSS隐藏日期表格和周标签，确保界面简洁
3. 逻辑简化：移除原有的手动绑定年月点击事件，组件会自动处理年月选择后的日期设置
4. 本地化调整：将fromLabel和toLabel改为韩语适配的“시작”“종료”，提升用户体验
5. 年份范围：可选设置minYear和maxYear限制可选年份范围，避免无效选择

内容的提问来源于stack exchange，提问作者임기창