将 ISO 日期更改为短日期 JavaScript

Question

我目前有一个函数设置，可以从输入日期字段中的选定日期获取接下来的两周或几个月。但是，我面临的问题是我想获得输出 DD/MM/YYYY 的日期，但是我得到了需要简短的完整 ISO 日期。有谁知道我该怎么做？

编辑：

我添加了moment(date1).format('DD/MM/YYYY'); 来测试代码，但这并没有提供任何结果。

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 date1 = dateSelected;
    
    moment(date1).format('DD/MM/YYYY');
    
    var date2 = new Date(date1);
    date2.setMonth(date2.getMonth() + 1);

    document.getElementById("pM1").innerHTML = date1;

    document.getElementById("pM2").innerHTML = date2;

  } else {
    document.getElementById("pWeeks").className = "";
    document.getElementById("pMonths").className = "hidden";

    var date1 = dateSelected;

    var date2 = new Date(date1);
    date2.setDate(date2.getDate() + 7);

    document.getElementById("pW1").innerHTML = date1;

    document.getElementById("pW2").innerHTML = date2;
  }
}

.hidden {
  display: none;
}

<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>

Answer 1

首先，您在此处将输入值设置为当前日期

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

不要那样做，这有点违背了选择器的初衷。

至于转换日期，我会使用 Date.prototype.toLocaleDateString() 传递 "en-US" 作为语言环境：

console.log((new Date()).toLocaleDateString('en-US')); // format MM/DD/YYY

我还修复了您设置新日期的方式，现在它需要一个日期，然后添加一两个月或一到几周，而不是没有和一个月，没有和一周;-)

function submit() {
  var type = document.getElementById("selectType").value;
  var dateSelected = document.getElementById('datePicker').valueAsDate;

  if (type === "Months") {
    document.getElementById("pWeeks").className = "hidden";
    document.getElementById("pMonths").className = "";

    var date1 = dateSelected;

    var datePlusOne = new Date(date1);
    datePlusOne.setMonth(date1.getMonth() + 1);
    
    var datePlusTwo = new Date(date1);
    datePlusTwo.setMonth(date1.getMonth() + 2);

    document.getElementById("pM1").innerHTML = datePlusOne.toLocaleDateString('en-US');

    document.getElementById("pM2").innerHTML = datePlusTwo.toLocaleDateString('en-US');

  } else {
    document.getElementById("pWeeks").className = "";
    document.getElementById("pMonths").className = "hidden";

    var date1 = dateSelected;

    var datePlusOne = new Date(date1);
    datePlusOne.setDate(date1.getDate() + 7);
    
    var datePlusTwo = new Date(date1);
    datePlusTwo.setDate(date1.getDate() + 14);

    document.getElementById("pW1").innerHTML = datePlusOne.toLocaleDateString('en-US');

    document.getElementById("pW2").innerHTML = datePlusTwo.toLocaleDateString('en-US');
  }
}

.hidden {
  display: none;
}

<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>

Answer 2

您应该首先使用日期对象提供的方法（getFullYear、getDate、getMonth；参见docu）构建一个字符串，而不是document.getElementById("pM1").innerHTML = date1;。然后你可以将字符串分配给innerHtml。

如果您可以使用 moment.js，那么您分配给您的 innerHtml 的代码是 date1 = moment(dateSelected).format('DD/MM/YYYY')

另外我会推荐卢卡的方式：

至于转换日期，我会使用 Date.prototype.toLocaleDateString() 传递“en-US”

会查看你的代码：

dateSelected.toLocaleDateString('en-US')

Answer 3

您可以使用 MomentJS 库来保持简单：

包含库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
document.getElementById("pM1").innerHTML = moment(date1).format('DD/MM/YYYY');
document.getElementById("pM2").innerHTML = moment(date2).format('DD/MM/YYYY');

在其他方面：

document.getElementById("pW1").innerHTML = moment(date1).format('DD/MM/YYYY');
document.getElementById("pW2").innerHTML = moment(date2).add(1, 'week').format('DD/MM/YYYY');