jQuery3.3.1中datepicker选择日期自动计算年龄失效解决方法

你的代码在jQuery 3.3.1环境下不生效，通常是以下几个原因导致：

• 执行时机错误：脚本运行时DOM节点还未加载完成，jQuery无法找到#tgl_lahir元素，datepicker插件根本没有完成绑定。jQuery 3.x调整了DOM ready事件的触发优先级，如果脚本放在页面头部且没有包裹DOM加载完成的回调，很容易出现这个问题。
• 语法错误：配置项最后一行defaultDate: '-18yr',末尾多余的逗号，在部分兼容场景下会触发JS解析错误，导致整个初始化脚本中断。
• 年龄计算逻辑缺陷：直接用当前年份减出生年份的算法不准确，没有判断当年生日是否已过，会出现年龄多算1岁的问题。
• 依赖顺序错误：必须先引入jQuery 3.3.1，再引入jQuery UI的样式和脚本，顺序颠倒会直接报datepicker方法不存在的错误。

<!-- 注意依赖加载顺序：先引入jQuery，再引入jQuery UI资源 -->
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.min.js"></script>

<script type="text/javascript">
// DOM加载完成后再执行初始化
$(function () {
    $('#tgl_lahir').datepicker({
        onSelect: function (value, ui) {
            const today = new Date();
            const birthDate = new Date(ui.selectedYear, ui.selectedMonth, ui.selectedDay);
            let age = today.getFullYear() - birthDate.getFullYear();
            const monthGap = today.getMonth() - birthDate.getMonth();
            // 当年生日未到时，年龄减1
            if (monthGap < 0 || (monthGap === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }
            $('#umur').val(age);
        },
        maxDate: '+0d',
        changeMonth: true,
        changeYear: true,
        defaultDate: '-18yr'
    });
});
</script>

• 按F12打开浏览器控制台，如果出现$(...).datepicker is not a function报错，优先检查jQuery和jQuery UI的加载顺序、文件路径是否正确。
• 确认两个输入框的id完全匹配：生日选择框id为tgl_lahir，年龄赋值输入框id为umur，id拼写错误会导致赋值失败。
• 如果表单是动态渲染（比如异步加载、弹窗内表单），需要等表单元素完全插入到页面DOM后，再执行datepicker初始化逻辑。

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