如何修改datetime-local输入框获取的日期时间显示格式？

当你使用datetime-local类型输入框获取到的时间格式是YYYY-MM-DDTHH:mm（比如2023-05-31T15:09）时，可以通过以下两种方式转换成更易读的格式（如31-05-2023, 15:09）：

方法一：利用原生Date对象处理 #

通过将输入值转换为Date对象，提取并重组日期时间各部分：

<input id="date" type="datetime-local" />
<!-- 可选：用于显示转换后的结果 -->
<p id="formatted-date"></p>

const dateInput = document.getElementById("date");
const displayElement = document.getElementById("formatted-date");

dateInput.addEventListener("change", function() {
  const inputValue = this.value;
  if (!inputValue) {
    displayElement.textContent = "";
    return;
  }

  const date = new Date(inputValue);
  // 补零确保单数字日期/月份/时间显示为两位
  const day = String(date.getDate()).padStart(2, "0");
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需+1
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");

  const readableFormat = `${day}-${month}-${year}, ${hours}:${minutes}`;
  console.log(readableFormat);
  displayElement.textContent = readableFormat;
});

方法二：手动拆分字符串重组 #

因为datetime-local的输入格式是固定的YYYY-MM-DDTHH:mm，可以直接拆分字符串后重组：

<input id="date" type="datetime-local" />
<p id="formatted-date"></p>

const dateInput = document.getElementById("date");
const displayElement = document.getElementById("formatted-date");

dateInput.addEventListener("change", function() {
  const inputValue = this.value;
  if (!inputValue) {
    displayElement.textContent = "";
    return;
  }

  // 按'T'分割日期和时间部分
  const [datePart, timePart] = inputValue.split("T");
  // 按'-'分割日期的年、月、日
  const [year, month, day] = datePart.split("-");

  const readableFormat = `${day}-${month}-${year}, ${timePart}`;
  console.log(readableFormat);
  displayElement.textContent = readableFormat;
});

两种方法对比 #

• 方法一灵活性更高，可轻松调整格式（如改为YYYY/MM/DD 小时:分钟或中文格式），但需注意Date对象的月份是0索引的特性。
• 方法二更简洁直接，无需处理Date对象的时区或索引问题，适合仅需调整日期顺序的场景。

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