jQuery month/year 选择器在进行选择时未在输入中显示 month/year

Question

我正在使用 jquery 日期选择器，我只需要一个月和一年。当我单击输入字段时，月份和年份选择器会弹出。问题是当我 select 任何月份或年份时，更新的数据不会反映在输入字段中，除非我在页面上的其他地方单击。

这就是我显示选择器的方式

$(function () {
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'MM yy',
        onClose: function (dateText, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});

我在这里做错了什么？我只需要输入字段在我单击任何月份或年份时立即反映更新的 selection。

Answer 1

使用 onChangeMonthYear 代替 onClose

onChangeMonthYear 当日期选择器移动到新月 and/or 年时调用。该函数接收选定的年、月 (1-12) 和日期选择器实例作为参数。这是指关联的输入字段。

$(function () {
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'MM yy',
        onChangeMonthYear: function (year,month, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});

$(function () {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            dateFormat: 'MM yy',
            onChangeMonthYear: function (year,month, inst) {
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); console.log(inst.selectedYear,inst.selectedMonth);
            }
        });
    });

<input class="datepicker" type="text" /><br />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jQuery month/year 选择器在进行选择时未在输入中显示 month/year

jQuery month/year picker not showing month/year in input on making a selection

jquery

datepicker

jquery-ui-datepicker