如何设置Bootstrap Datepicker点击整个输入框打开日历？

当前使用Bootstrap Datepicker时，仅能通过输入框旁的图标打开日历组件，希望点击整个输入框区域即可唤起日历，可按以下步骤修改：

关键修改点 #

1. 替换输入框类型：把原生type="date"改为type="text"，避免浏览器原生日期控件与Bootstrap Datepicker插件冲突
2. 动态DOM初始化插件：由于表单是在SweetAlert弹窗中动态生成的，必须等待弹窗渲染完成后再初始化Datepicker
3. 配置插件触发方式：Bootstrap Datepicker默认支持点击输入框唤起日历，只需确保初始化时机正确即可

修改后的完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>

<script>
function exportbydate() {
    swal({
        title: "{{trans('a_pdf.choosedate')}}",
        html: `<form action="{{ url('/myaccount/view/transfer/pdf') }}" method="GET">`+
            `<div class="row">
                <input id="fromdate" name="fromdate" class="form-control" type="text" placeholder="选择开始日期" style="margin:10px; width: 50%;" autocomplete="off" required/>
                <input id="todate" name="todate" class="form-control" type="text" placeholder="选择结束日期" style="margin:10px; width: 50%" autocomplete="off" required/>
            </div>`+
            `<button type="submit" class="btn btn-primary">{{trans('a_pdf.search')}}</button>`+
            `</form>`,
        width: '650px',
        showCancelButton: false,
        showConfirmButton: false,
        showCloseButton: true,
        didOpen: function() {
            // 弹窗渲染完成后初始化Datepicker
            $('#fromdate, #todate').datepicker({
                autoclose: true, // 选择日期后自动关闭日历
                format: 'yyyy-mm-dd' // 配置日期格式，与后端接收格式匹配
            });
        }
    })
}
</script>

额外说明 #

• 如果需要保留输入框旁的图标触发，可在初始化时添加showOn: "both"选项，同时支持点击输入框和图标唤起日历
• format参数可根据实际需求调整，比如'dd/mm/yyyy'等格式

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