Mozilla Firefox中input date控件日期格式显示问题求助

原生<input type="date">的显示格式由浏览器和操作系统区域设置决定，Firefox会遵循系统日期规则，没法直接通过HTML/CSS修改原生控件的显示格式，以下是三种可行的解决办法：

方法一：用JS模拟自定义格式显示 #

隐藏原生date控件，用文本框展示自定义格式，同时保留原生的日期选择功能：

<div class="row"> 
    <div class="col-lg-4"> 
      <div class="form-group">
        <label>Date of Appointment:</label>
        <!-- 隐藏原生日期控件 -->
        <input type="date" name="dateq" id="dateq" class="form-control d-none" required>
        <!-- 用于显示自定义格式的文本框 -->
        <input type="text" id="date-display" class="form-control" readonly>
      </div>
    </div>
</div>

<script>
const nativeDate = document.getElementById('dateq');
const displayDate = document.getElementById('date-display');

// 初始化：如果控件有默认值，格式化后显示
if (nativeDate.value) {
  const date = new Date(nativeDate.value);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  displayDate.value = `${day}/${month}/${year}`;
}

// 选择日期后，格式化显示到文本框
nativeDate.addEventListener('change', function() {
  if (!this.value) return;
  const date = new Date(this.value);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  displayDate.value = `${day}/${month}/${year}`;
});

// 点击显示文本框时，触发原生控件的选择器
displayDate.addEventListener('click', function() {
  nativeDate.click();
});
</script>

方法二：CSS视觉隐藏原生格式，自定义显示 #

仅改变视觉效果，实际提交数据还是原生格式，适合仅通过选择器操作日期的场景：

<div class="row"> 
    <div class="col-lg-4"> 
      <div class="form-group">
        <label>Date of Appointment:</label>
        <div class="date-wrapper">
          <input type="date" name="dateq" id="dateq" class="form-control" required>
          <span class="date-display"></span>
        </div>
      </div>
    </div>
</div>

<style>
.date-wrapper {
  position: relative;
}
/* 隐藏原生日期的文字显示 */
#dateq {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* 自定义显示层，模拟输入框样式 */
.date-display {
  display: block;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  background: white;
}
</style>

<script>
const nativeDate = document.getElementById('dateq');
const displaySpan = document.querySelector('.date-display');

// 选择日期后更新显示文本
nativeDate.addEventListener('change', function() {
  if (!this.value) {
    displaySpan.textContent = '';
    return;
  }
  const date = new Date(this.value);
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  displaySpan.textContent = `${day}/${month}/${year}`;
});
</script>

方法三：使用第三方日期选择库 #

引入第三方库（如Flatpickr、Datepicker.js），这类库支持自定义日期格式，且跨浏览器表现一致。以Flatpickr为例：

<!-- 引入Flatpickr的样式和脚本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<div class="row"> 
    <div class="col-lg-4"> 
      <div class="form-group">
        <label>Date of Appointment:</label>
        <input type="text" name="dateq" id="dateq" class="form-control" required>
      </div>
    </div>
</div>

<script>
// 初始化Flatpickr，设置日期格式为dd/mm/yyyy
flatpickr("#dateq", {
  dateFormat: "d/m/Y",
  allowInput: true
});
</script>

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