如何通过代码强制设置HTML date输入框为意式gg/mm/aaaa格式

原生的<input type="date">有核心限制：它的显示格式由浏览器的系统/语言设置控制，开发者无法通过HTML或原生JS直接修改显示样式；同时它的value属性始终返回yyyy-MM-dd的ISO标准格式，这是HTML规范明确规定的。因此要强制显示意大利式的gg/mm/aaaa格式，需采用以下两种替代方案：

方案一：使用第三方日期选择器库 #

第三方库提供了完全自定义的日期显示和选择逻辑，能轻松指定格式。以Flatpickr为例：

修改后的HTML #

<table>
    <tr>
        <td class="searchLabel">Departure Date:</td>
        <td><input type="text" id="departureDate" placeholder="gg/mm/aaaa"></td>
    </tr>
</table>

初始化JS（Flatpickr） #

// 初始化Flatpickr，指定意大利格式和区域
flatpickr("#departureDate", {
    dateFormat: "d/m/Y", // 对应gg/mm/aaaa格式
    locale: "it", // 启用意大利语区域（包含日期文本本地化）
    allowInput: true
});

// 获取格式化后的日期值
const departureDate = document.getElementById("departureDate").value;

方案二：自定义日期输入组件 #

如果不想依赖第三方库，可以自己封装模拟组件，隐藏原生date输入，用自定义UI替代：

HTML结构 #

<table>
    <tr>
        <td class="searchLabel">Departure Date:</td>
        <td>
            <!-- 隐藏的原生input，用于存储ISO格式日期，提交表单用 -->
            <input type="date" id="hiddenDepartureDate" style="display: none;">
            <!-- 自定义显示的输入框 -->
            <input type="text" id="displayDepartureDate" placeholder="gg/mm/aaaa">
        </td>
    </tr>
</table>

JS逻辑（处理输入、验证和格式转换） #

const displayInput = document.getElementById("displayDepartureDate");
const hiddenInput = document.getElementById("hiddenDepartureDate");

// 监听自定义输入框的变化，转换为ISO格式存入隐藏input
displayInput.addEventListener("blur", function() {
    const [day, month, year] = this.value.split("/");
    if (day && month && year) {
        // 转换为ISO格式：yyyy-MM-dd
        const isoDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
        hiddenInput.value = isoDate;
    }
});

// 页面加载时，若隐藏input有值，转换为意大利格式显示
window.addEventListener("load", function() {
    if (hiddenInput.value) {
        const [year, month, day] = hiddenInput.value.split("-");
        displayInput.value = `${day}/${month}/${year}`;
    }
});

// 获取ISO格式的日期（用于提交）
const departureDate = hiddenInput.value;

额外提示 #

• 自定义方案需添加日期格式验证逻辑（比如检查日期合法性），避免无效输入。
• 若需要日历选择弹窗，可以结合原生date输入框的弹窗触发逻辑，或自行实现简单日历组件。

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