如何将HTML表单type="date"的默认日期格式改为YYYY-MM-DD

一、修改默认显示为yyyy-mm-dd #

先给你划个重点：原生<input type="date">的显示格式是由用户操作系统的区域设置决定的——比如欧洲地区可能默认显示dd-mm-yyyy，美国地区是mm/dd/yyyy，中文系统大概率是yyyy/mm/dd。HTML本身没有直接属性能强制它显示为yyyy-mm-dd，但我们可以用「隐藏原生控件+显示格式化文本框」的方案，既保留原生日期选择的便利性，又能固定显示格式。

这里有个小细节：原生date控件的value属性始终以yyyy-mm-dd格式存储，不管它在页面上显示成啥样。我们可以利用这一点来实现需求：

<!-- 隐藏的原生日期选择控件，负责处理日期选择逻辑 -->
<input type="date" id="nativeDatePicker" style="display: none;">

<!-- 用于展示格式化日期的文本框，设为只读避免用户输入错误格式 -->
<input type="text" id="formattedDateDisplay" placeholder="yyyy-mm-dd" readonly>

<script>
const nativePicker = document.getElementById('nativeDatePicker');
const displayInput = document.getElementById('formattedDateDisplay');

// 初始化：如果有默认日期，同步到显示框
if (nativePicker.value) {
  displayInput.value = nativePicker.value;
}

// 点击显示框时触发原生日期选择器的弹窗
displayInput.addEventListener('click', () => {
  nativePicker.click();
});

// 选择日期后，将原生控件的yyyy-mm-dd值同步到显示框
nativePicker.addEventListener('change', () => {
  displayInput.value = nativePicker.value;
});
</script>

这个方案既保留了原生日历弹窗、格式校验的优势，又能让用户看到固定的yyyy-mm-dd显示格式。

二、将日期类型转换为YYYY-DD-MM格式 #

注意你要的是YYYY-DD-MM（年-日-月），和常规的YYYY-MM-DD不一样，分两种场景处理：

场景1：从JavaScript Date对象转换 #

如果输入是Date对象，写个格式化函数就能搞定：

function formatToYYYYDDMM(date) {
  const year = date.getFullYear();
  // 用padStart补零，确保日、月都是两位数
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是0索引，记得+1
  
  return `${year}-${day}-${month}`;
}

// 示例使用
const today = new Date();
console.log(formatToYYYYDDMM(today)); // 输出类似 "2024-15-08"

场景2：从yyyy-mm-dd字符串转换 #

如果输入是原生date控件返回的yyyy-mm-dd字符串，直接拆分重组更高效：

function convertYYYYMMDDToYYYYDDMM(dateString) {
  const [year, month, day] = dateString.split('-');
  return `${year}-${day}-${month}`;
}

// 示例使用
const inputDate = "2024-08-15";
console.log(convertYYYYMMDDToYYYYDDMM(inputDate)); // 输出 "2024-15-08"

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