如何让输入框默认显示当前日期时间并支持日期选择？附失败代码

看起来你想要实现的是输入框默认展示当前日期+时间，同时通过日期选择器选择日期后更新输入框内容。你的现有代码用了bootstrap-datepicker，但有几个小问题导致没达到预期：

1. 配置的format是mm-dd-yyyy，只包含日期部分，所以即使设置了当前日期，也不会显示时间
2. 没有手动格式化包含时间的初始值，datepicker的setDate方法只会按照你指定的格式渲染内容

下面给你两种解决方案，根据你的需求选择：

方案1：默认显示日期+时间，选择日期后仅更新日期部分 #

如果你希望默认显示完整的日期时间，但选择日期时只修改日期（时间保留初始的当前时间），可以这样修改：

HTML代码（保持不变） #

<div class="form-group">
    <div class="input-group date" id="datePicker">
        <input type="text" class="form-control" name="date" value="">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
    </div>
</div>

JavaScript代码 #

// 获取当前日期时间并格式化为 mm-dd-yyyy HH:mm:ss 格式
const now = new Date();
const formattedNow = `${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}-${now.getFullYear()} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;

const optComponent = {
    format: "mm-dd-yyyy", // 日期选择器的选择格式
    container: "#datePicker",
    orientation: "auto top",
    todayHighlight: true,
    autoclose: true,
    // 选择日期后，保留原有时间部分
    onSelect: function(selectedDate) {
        const timePart = this.value.split(' ')[1];
        const newDateTime = `${$(this).datepicker('getFormattedDate')} ${timePart}`;
        $(this).val(newDateTime);
    }
};

// 初始化日期选择器
$('#datePicker').datepicker(optComponent);
// 设置初始的日期时间值
$('#datePicker input').val(formattedNow);

方案2：使用datetimepicker支持日期+时间选择 #

如果你希望不仅默认显示日期时间，还支持选择时间，可以换成bootstrap-datetimepicker组件（需要确保项目中引入了对应的CSS和JS文件）：

HTML代码 #

<div class="form-group">
    <div class="input-group date" id="datePicker">
        <input type="text" class="form-control" name="date" value="">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
    </div>
</div>

JavaScript代码 #

const optComponent = {
    format: "MM-DD-YYYY HH:mm:ss", // 包含日期和时间的完整格式
    container: "#datePicker",
    orientation: "auto top",
    todayHighlight: true,
    autoclose: true
};

// 初始化datetimepicker并设置当前时间
$('#datePicker').datetimepicker(optComponent);
$('#datePicker').datetimepicker('setDate', new Date());

关键说明 #

• 方案1适合只需要选择日期，但默认显示完整时间的场景
• 方案2适合需要同时选择日期和时间的场景，注意要引入bootstrap-datetimepicker的相关资源
• 注意JavaScript中月份是从0开始计数的，所以格式化月份时要做getMonth()+1的处理，再补零保证两位格式

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