Laravel项目中Chrome与Firefox日期格式不一致，如何统一为dd-mm-yyyy？

原生<input type="date">的显示格式由用户的浏览器和操作系统区域设置控制，没法通过HTML属性直接强制指定显示格式。要实现跨浏览器一致的dd-mm-yyyy显示，有两种靠谱的方案：

方案一：使用第三方日期选择器库（推荐） #

比如Flatpickr，它能完全自定义日期显示格式，且跨浏览器表现一致。

步骤： #

1. 引入Flatpickr资源（可用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. 修改Laravel视图代码，替换原生date输入为普通text输入并初始化Flatpickr：

<div class="text-center m-2">
    <label for="startdateReceived">Start Date</label>
    <input type="text" name="startdateReceived" id="startDateReceive" 
           value="{{ date('d-m-Y', strtotime('monday this week')) }}"/>
    <label for="enddateReceive">End Date</label>
    <input type="text" name="enddateReceive" id="endDateReceive" 
           value="{{ date('d-m-Y', strtotime('sunday this week')) }}"/>
    <button type="submit" id="receiveButton" onclick="getCashReceivedData()">Shfaq vlerat</button>
</div>

<script>
// 初始化日期选择器，用户看到dd-mm-yyyy，提交给后端的是Laravel需要的Y-m-d格式
flatpickr("#startDateReceive", {
    dateFormat: "d-m-Y",
    altFormat: "Y-m-d",
    altInput: true,
    defaultDate: "{{ date('Y-m-d', strtotime('monday this week')) }}"
});

flatpickr("#endDateReceive", {
    dateFormat: "d-m-Y",
    altFormat: "Y-m-d",
    altInput: true,
    defaultDate: "{{ date('Y-m-d', strtotime('sunday this week')) }}"
});
</script>

方案二：自定义实现（不依赖第三方库） #

用普通text输入框展示格式，搭配隐藏输入框存储后端需要的格式，通过JavaScript处理日期选择和转换：

<div class="text-center m-2">
    <label for="startdateReceived">Start Date</label>
    <input type="text" id="startDateReceiveDisplay" 
           value="{{ date('d-m-Y', strtotime('monday this week')) }}"/>
    <input type="hidden" name="startdateReceived" id="startDateReceive" 
           value="{{ date('Y-m-d', strtotime('monday this week')) }}"/>
    
    <label for="enddateReceive">End Date</label>
    <input type="text" id="endDateReceiveDisplay" 
           value="{{ date('d-m-Y', strtotime('sunday this week')) }}"/>
    <input type="hidden" name="enddateReceive" id="endDateReceive" 
           value="{{ date('Y-m-d', strtotime('sunday this week')) }}"/>
    
    <button type="submit" id="receiveButton" onclick="getCashReceivedData()">Shfaq vlerat</button>
</div>

<script>
// 处理开始日期选择
document.getElementById('startDateReceiveDisplay').addEventListener('click', function() {
    const hiddenInput = document.getElementById('startDateReceive');
    const tempPicker = document.createElement('input');
    tempPicker.type = 'date';
    tempPicker.value = hiddenInput.value;
    
    tempPicker.addEventListener('change', function() {
        if (this.value) {
            const date = new Date(this.value);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            document.getElementById('startDateReceiveDisplay').value = `${day}-${month}-${date.getFullYear()}`;
            hiddenInput.value = this.value;
        }
    });
    tempPicker.click();
});

// 处理结束日期选择
document.getElementById('endDateReceiveDisplay').addEventListener('click', function() {
    const hiddenInput = document.getElementById('endDateReceive');
    const tempPicker = document.createElement('input');
    tempPicker.type = 'date';
    tempPicker.value = hiddenInput.value;
    
    tempPicker.addEventListener('change', function() {
        if (this.value) {
            const date = new Date(this.value);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            document.getElementById('endDateReceiveDisplay').value = `${day}-${month}-${date.getFullYear()}`;
            hiddenInput.value = this.value;
        }
    });
    tempPicker.click();
});
</script>

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