Datepicker输入框问题：已选日期显示但提交时值为空

使用Datepicker组件时，用户选择日期后输入框能正常显示对应日期，但提交表单时该字段提交的是空数据——仅在输入框有视觉显示，实际无值。

关联JS代码 #

<script>
    $(document).ready(function () {
        $('[data-toggle="datepickerFrom"]').datepicker({
            format: 'dd-mm-yyyy'
        });
        // 可用日期占位符说明:
        // 年份: yyyy
        // 月份: mm
        // 日期: dd
        if (window.innerWidth < 768) {
            $('[data-toggle="datepicker"]').attr('readonly', 'readonly')
        }
    });
</script>

截图说明 #

• 图1：Datepicker输入框为空状态
  
• 图2：选中日期后输入框显示对应日期
  
• 图3：输入框显示日期但实际值为空
  

按以下步骤排查修复：

1. 检查输入框的name属性
   表单提交时，只有带name属性的输入框数据才会被携带，确保绑定Datepicker的输入框设置了该属性，示例：

<input type="text" data-toggle="datepickerFrom" name="date_from">

2. 强制同步选中日期到输入框value
   部分Datepicker插件仅修改输入框文本内容，未更新value属性，可通过选择回调手动同步：
   修改JS代码，添加onSelect回调：

$('[data-toggle="datepickerFrom"]').datepicker({
    format: 'dd-mm-yyyy',
    onSelect: function(dateText) {
        $(this).val(dateText); // 手动将选中日期赋值给输入框value
    }
});

3. 确认DOM选择器一致性
   代码中初始化Datepicker用的是[data-toggle="datepickerFrom"]，设置readonly用的是[data-toggle="datepicker"]，需确保两个选择器对应同一输入框，避免绑定错误导致功能异常。

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