希望让input=date在Javascript中接受DD/MM/YYYY格式

Question

我对Javascript相对较新，我被要求创建一个日期计算器，它将计算出您的年龄与2019年3月31日的日期进行比较。我已经让这部分工作，但客户要求他们能够填写日期为DD/MM/YYYY而不是默认的MM/DD/YYYY!？

我曾尝试使用Bootstrap日期选择器并更改为文本输入，但我一直收到无效的日期!？

这感觉应该是我遗漏的一行代码，但我尝试过的一些示例对我来说并不起作用……所以这是我目前正在使用的JS和HTML，如果有人能帮上忙，我将不胜感激！

https://codepen.io/raindahl/pen/vzBXgV

​

function ageCalculate() {
  var birthDate1 = document.getElementById("birth_date").value;
  var today = new Date("2019-03-31");
  var birthDate = new Date(birthDate1);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();

  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }

  document.getElementById("age").innerHTML =
    "<strong>On 31st March 2019 the patient will be:</strong>" +
    "&nbsp" +
    age +
    " years " +
    "&nbsp" +
    "old";
  var year_age = age;

  var az = document.getElementById("invalid");
  var bd = document.getElementById("age");

  if (isNaN(year_age)) {
    bd.style.display = "none";
    az.style.display = "block";
  }

  if (year_age <= 64) {
    bd.style.display = "block";
      az.style.display = "none";
  }

  if (year_age >= 65) {
    bd.style.display = "block";

    az.style.display = "none";
  }

  if (year_age >= 75) {
    bd.style.display = "block";

    az.style.display = "none";
  }
}

<input type="date" class="datepicker" id="birth_date" placeholder="DD/MM/YYYY" />

<input class="btn btn-primary" type="button" value="OK" onclick="ageCalculate()">

<div class="col-md-6 col-sm-6">

  <!-- Displays the patients age: 42 Years 7months -->
  <div id="age"></div>
  <!-- Invalid Dates -->
  <div id="invalid" style="display:none;">
    <div class="alert alert-danger">
      <span class="fa fa-exclamation-triangle"></span> &nbsp; <strong>Invalid date of birth</strong>
    </div>
  </div>
  <!-- Over 65 Years Old -->
  <div id="over65" style="display:none;">
    <div class="alert alert-success">
      <span class="fa fa-check"></span> &nbsp; <strong>This patient requires Trivalent (TIV) </strong>
    </div>
  </div>
  <!-- Over 75 Years Old -->
  <div id="over75" style="display:none;">
    <div class="alert alert-success">
      <span class="fa fa-check"></span> &nbsp; <strong>This patient requires Adjuvanted Trivalent (aTIV)</strong>
    </div>
  </div>
  <!-- Under 65 Years Old -->
  <div id="under65" style="display: none;">
    <div class="alert alert-success">
      <span class="fa fa-check"></span> &nbsp; <strong>This patient requires Quadrivalent (QIV)</strong>
    </div>
  </div>
  <p id="demo"></p>
</div>

​

Answer 1

尝试使用此函数，它将返回DD/MM/YYYY格式的日期

​

function dateFormatter(date) {
  date = new Date(date);
  const date_string =
    (date.getDate().toString().length === 2
      ? date.getDate()
      : "0" + date.getDate().toString()) +
    "/" +
    ((date.getMonth() + 1).toString().length === 2
      ? date.getMonth() + 1
      : "0" + (date.getMonth() + 1).toString()) +
    "/" +
    date.getFullYear();
  return date_string;
}

​

Answer 2

我设法解决了这个问题，方法是在变量birthDate的末尾添加一个拆分，然后允许使用text=input作为表单的dd/mm/yyyy

   var birthDate = new Date(birthDate1.split('/')[2], birthDate1.split('/')[1] - 1, birthDate1.split('/')[0]);

Answer 3

要在js中格式化dd-mm-yyyy或dd/mm/yyyy格式的日期，您需要一个可以进行格式化的函数。在js中没有内置帮助器函数来提供这种功能。然而，我们正在等待在即将到来的js版本中将日期格式化方法作为prototype-method。现在，您有一个如下所示的解决方法。

function formattor(date , separator = '/') {
    date = new Date(date);
    const date_string =
      (date.getDate().toString().length === 2
        ? date.getDate()
        : '0' + date.getDate().toString()) +
      separator +
      ((date.getMonth() + 1).toString().length === 2
        ? date.getMonth() + 1
        : '0' + (date.getMonth() + 1).toString()) +
      separator +
      date.getFullYear();
    return date_string;
  }

使用date和可选的separator参数调用formattor，它将返回格式化的日期。这里我在day和month前面加上了前缀，因为我们需要处理一位数的值，并且month递增1，因为month索引从0开始，而人类可读的月份从1开始。