如何将可选时段按钮的时间插入datetime-local表单字段

要实现点击时段按钮将时间填入datetime-local字段，核心是满足该字段的格式要求（YYYY-MM-DDTHH:MM），并通过JavaScript绑定点击事件完成赋值，具体修改如下：

1. 修改PHP生成按钮的代码 #

给每个时段按钮添加data-datetime属性，存储符合datetime-local格式的完整时间值，同时保留显示的时段文本：

<?php
$sched_set_qry = $conn->query("SELECT * FROM `schedule_settings`");
$sched_set = array_column($sched_set_qry->fetch_all(MYSQLI_ASSOC),'meta_value','meta_field');
$today = date("Y-m-d");
$morningSlots = explode(',',$sched_set['morning_schedule']);
$a = $today . " " . $morningSlots[0];
$b = $today . " " . $morningSlots[1];

$period = new DatePeriod(
    new DateTime($a),
    new DateInterval('PT1H'),
    new DateTime($b)
);
foreach ($period as $date){
    // 生成符合datetime-local格式的字符串：YYYY-MM-DDTHH:MM
    $fullDatetime = $date->format("Y-m-d\TH:i");
    $displayTime = $date->format("H:i");
?>
<input type="button" class="form-control time-btn" name="time" value="<?php echo $displayTime; ?>" data-datetime="<?php echo $fullDatetime; ?>">
<?php } ?>

2. 添加JavaScript点击事件 #

在页面底部（或脚本标签中）添加代码，监听按钮点击并赋值给datetime-local输入框：

// 获取所有时段按钮和日期输入框
const timeButtons = document.querySelectorAll('.time-btn');
const dateSchedInput = document.querySelector('input[name="date_sched"]');

// 给每个按钮绑定点击事件
timeButtons.forEach(btn => {
    btn.addEventListener('click', function() {
        // 从data-datetime属性获取格式正确的时间值，填入输入框
        dateSchedInput.value = this.getAttribute('data-datetime');
    });
});

关键说明 #

• datetime-local字段必须严格使用YYYY-MM-DDTHH:MM格式（注意日期和时间之间的T分隔符），直接传入H:i格式的时间无法识别。
• 通过data-*属性存储完整的格式化时间，避免在点击时再拼接日期，减少出错概率。
• 给按钮统一添加time-btn类，方便JavaScript批量选择元素，避免影响其他按钮。

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