如何从按钮data属性为date类型输入框赋值？

关键原因 #

原生date类型输入框仅支持ISO格式（YYYY-MM-DD），而你的data-starttime属性值是DD.MM.YYYY格式，直接赋值会被浏览器忽略；同时Bootstrap Datepicker有自身的内部状态，仅用原生val()方法赋值无法同步组件状态。

解决方案代码 #

// 绑定图片点击事件，打开模态框并填充日期
$('img[data-starttime]').on('click', function() {
    // 获取图片上的原始日期值
    const rawDateStr = $(this).data('starttime');
    // 拆分日/月/年，转换为原生date输入框要求的ISO格式
    const [day, month, year] = rawDateStr.split('.');
    const isoDate = `${year}-${month}-${day}`;

    // 定位日期输入框
    const $dateInput = $('#your-date-input-id');

    // 1. 给原生date输入框赋值（ISO格式）
    $dateInput.val(isoDate);

    // 2. 同步Bootstrap Datepicker的状态
    if ($dateInput.data('datepicker')) {
        // 已初始化Datepicker的情况，调用API设置值
        $dateInput.datepicker('setDate', isoDate);
    } else {
        // 未初始化的情况，先初始化再设置值
        $dateInput.datepicker({
            format: 'dd.mm.yyyy', // 设置Datepicker显示的格式，和data属性一致
            autoclose: true
        }).datepicker('setDate', isoDate);
    }

    // 打开模态框
    $('#your-modal-id').modal('show');
});

注意事项 #

• 替换代码中的#your-date-input-id和#your-modal-id为你实际的元素ID
• 如果模态框是动态生成的，需要把事件委托到document上，写法改为：$(document).on('click', 'img[data-starttime]', function() {...})
• Datepicker的format参数可以根据需求调整，确保和用户看到的显示格式匹配

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