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

您可以使用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');

Answer 3

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

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

我也会推荐Luca的方式：

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

会看你的代码：

dateSelected.toLocaleDateString('en-US')

将ISO日期更改为短日期JavaScript

3 个答案: