如何通过单个JavaScript DatePicker实现双日期字段联动（结束日延后2天）

你可以通过给DatePicker添加onSelect回调函数实现这个需求，当用户选中startDate的日期后，自动计算并设置endDate的日期。

修改你的datepicker函数，加入日期选择后的处理逻辑：

function datepicker(element) {
    element.datepicker({
        showOn: "both",
        buttonImage: "calendar",
        buttonImageOnly: true,
        // 添加日期选择后的回调逻辑
        onSelect: function(selectedDate) {
            // 将选中日期转为Date对象
            var startDate = new Date(selectedDate);
            // 计算延后2天的日期
            var endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + 2);
            
            // 格式化日期（和DatePicker默认格式一致，若自定义格式需对应修改）
            var formattedEndDate = $.datepicker.formatDate($.datepicker._defaults.dateFormat, endDate);
            
            // 将计算后的日期填入endDate输入框
            $("#endDate").val(formattedEndDate);
        }
    });
}

$(document).ready(function(){
    datepicker($("#startDate"));
});

关键说明： #

• onSelect是jQuery UI DatePicker的内置事件，用户选中日期后会触发该回调，参数selectedDate是用户选择的日期字符串
• 使用setDate()计算延后日期时，该方法会自动处理跨月、跨年的边界情况（比如1月31日加2天会自动转为2月2日）
• 如果你的DatePicker自定义了日期格式（通过dateFormat选项设置），需要把$.datepicker._defaults.dateFormat替换为你实际使用的格式字符串，例如"yy-mm-dd"

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