1. 如何在选择年份和月份时获取对应的日期？ #

你当前的代码其实已经实现了这个需求，核心逻辑都在onClose回调里：

• 当关闭DatePicker面板时，通过inst.selectedYear和inst.selectedMonth可以直接拿到用户选择的年和月
• 用new Date(inst.selectedYear, inst.selectedMonth, 1)生成当月第一天的日期，设置到起始输入框
• 用new Date(inst.selectedYear, inst.selectedMonth + 1, 0)生成当月最后一天的日期，设置到结束输入框
• 配合.ui-datepicker-calendar { display: none; }隐藏日历面板，让用户只能专注于选择年月

2. 无需点击完成按钮，选择年月后自动获取日期的实现方式？ #

如果不想依赖点击完成按钮，可以改用onChangeMonthYear事件——这个事件会在用户切换年份或月份时立即触发，不需要等待面板关闭。咱们可以把日期更新的逻辑移到这个回调里，同时保留onClose处理一些边界情况：

修改后的完整代码示例 #

<label for="startDate">Year/Month :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="startDate" id="to" class="to" />

<style>
.ui-datepicker-calendar { display: none; }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(function() { 
    $('.date-picker, .to').datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        showButtonPanel: true, 
        dateFormat: 'yy-mm-dd',
        // 切换年月时立即更新日期
        onChangeMonthYear: function(year, month, inst) {
            // 注意：jQuery UI的月份参数是从1开始的，而JS Date对象月份从0开始，所以要减1转换
            const selectedMonth = month - 1;
            $(this).datepicker('setDate', new Date(year, selectedMonth, 1));
            $('#to').datepicker('setDate', new Date(year, selectedMonth + 1, 0));
        },
        // 兼容用户直接点击完成按钮的情况
        onClose: function(dateText, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            $('#to').datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth + 1, 0));
        } 
    }); 
});
</script>

关键细节说明 #

• onChangeMonthYear的month参数是1_{12（比如1代表一月），但JavaScript的`Date`对象月份是0}11，所以必须做减1转换，否则日期会出错
• 这个事件触发后会立刻更新输入框的日期，用户不用点击完成按钮，交互体验更流畅
• 保留onClose是为了处理用户打开面板后没切换年月，直接点击完成按钮的情况，避免日期没有被设置

内容的提问来源于stack exchange，提问作者leesuccess