Safari浏览器中datetime-local日期时间选择器无法显示求助

问题原因 #

Safari（桌面端及iOS端）对原生<input type="datetime-local">的支持存在局限性，不会像Chrome、Firefox等浏览器那样弹出带日历和时间选择的交互面板，只会显示为普通文本输入框，这是浏览器原生控件的兼容性问题。

你的原始代码：

<input class="form-control" name="expire_at" type="datetime-local" id="example-datetime-local-input" required>

当前Safari表现：显示为无选择器的普通文本输入框，用户只能手动输入符合格式的内容（YYYY-MM-DDTHH:MM）。
预期效果：点击控件弹出包含日历选择和时间调整的交互面板。

解决方案 #

方案1：使用第三方日期时间选择器库（推荐，统一跨浏览器体验） #

第三方库能绕过浏览器原生控件的兼容性差异，提供一致的交互效果。以Flatpickr为例：

1. 引入库资源（可下载库文件到本地后引入，或使用CDN）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

2. 修改HTML（可保留原input，也可改为type="text"）：

<input class="form-control" name="expire_at" id="example-datetime-local-input" required>

3. 初始化Flatpickr：

flatpickr("#example-datetime-local-input", {
    enableTime: true,
    dateFormat: "Y-m-d\\TH:i", // 匹配datetime-local的标准格式，方便后端接收
    minuteIncrement: 1,
    required: true
});

这样无论在Safari还是其他浏览器，都会显示统一的日期时间选择面板。

方案2：针对Safari做降级处理 #

如果不想引入第三方库，可通过JS检测Safari浏览器，给用户显示提示或替换为拆分的日期+时间控件：

1. 检测Safari的JS代码：

function isSafari() {
    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}

2. 替换控件或添加提示：

if (isSafari()) {
    const input = document.getElementById('example-datetime-local-input');
    // 替换为日期+时间两个控件
    input.outerHTML = `
        <div class="d-flex gap-2">
            <input class="form-control" name="expire_date" type="date" required>
            <input class="form-control" name="expire_time" type="time" required>
        </div>
    `;
    // 或者添加格式提示
    // input.insertAdjacentHTML('afterend', '<small class="text-muted">请输入格式：YYYY-MM-DDTHH:MM</small>');
}

后端接收时需要将日期和时间字段合并为一个datetime值。

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