JavaScript中如何将ISO日期转为DD/MM/YYYY短日期？Moment使用无效

我来帮你搞定这个问题！先看看你代码里的几个关键问题，然后给你修正后的完整实现：

问题分析 #

1. 日期获取逻辑错误：你这行代码是把日期输入框的值设置为当前日期，而不是获取用户选择的日期：

   var dateSelected = document.getElementById('datePicker').valueAsDate = new Date();
   

   应该改成获取用户选择的日期，若用户未选择则默认使用当前日期。

2. Moment.js格式化结果未保存：你调用了moment(date1).format('DD/MM/YYYY')但没有把格式化后的字符串存到变量里，后续插入DOM的还是原始的Date对象，自然会显示ISO格式。

3. 所有日期都需要格式化处理：不管是初始日期，还是计算后（加一周/一个月）的日期，都需要转成目标格式再插入DOM。

修正后的完整代码 #

JavaScript部分

function submit() {
  var type = document.getElementById("selectType").value;
  // 正确获取用户选择的日期，若无选择则用当前日期
  var dateSelected = document.getElementById('datePicker').valueAsDate || new Date();

  if (type === "Months") {
    document.getElementById("pWeeks").className = "hidden";
    document.getElementById("pMonths").className = "";
    
    // 格式化初始日期
    var formattedDate1 = moment(dateSelected).format('DD/MM/YYYY');
    // 计算一个月后的日期并格式化
    var date2 = new Date(dateSelected);
    date2.setMonth(date2.getMonth() + 1);
    var formattedDate2 = moment(date2).format('DD/MM/YYYY');
    
    document.getElementById("pM1").innerHTML = formattedDate1;
    document.getElementById("pM2").innerHTML = formattedDate2;
  } else {
    document.getElementById("pWeeks").className = "";
    document.getElementById("pMonths").className = "hidden";
    
    // 格式化初始日期
    var formattedDate1 = moment(dateSelected).format('DD/MM/YYYY');
    // 计算一周后的日期并格式化
    var date2 = new Date(dateSelected);
    date2.setDate(date2.getDate() + 7);
    var formattedDate2 = moment(date2).format('DD/MM/YYYY');
    
    document.getElementById("pW1").innerHTML = formattedDate1;
    document.getElementById("pW2").innerHTML = formattedDate2;
  }
}

CSS部分（保持不变）

.hidden { display: none; }

HTML部分（保持不变）

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<input type="date" id="datePicker"><br>
<select id="selectType">
  <option value="Months">Months</option>
  <option value="Weeks">Weeks</option>
</select><br>
<button id="submit" onclick="submit()">Submit</button>
<div id="pMonths" class="">
  <p id="pM1"></p>
  <p id="pM2"></p>
</div>
<div id="pWeeks" class="">
  <p id="pW1"></p>
  <p id="pW2"></p>
</div>

额外说明 #

如果你不想依赖Moment.js，也可以自己写一个轻量的格式化函数替代：

function formatDate(date) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1补正
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

之后把代码里的moment(date).format('DD/MM/YYYY')替换成formatDate(date)即可。

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