希望使 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

尝试使用此函数，它将 return 日期设为 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 的末尾添加拆分来解决问题，然后允许 dd/mm/yyyy 使用 text=input 作为表单

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

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

希望使 input=date 在 JavaScript 中接受 DD/MM/YYYY 格式

Looking to make input=date accept DD/MM/YYYY format in JavaScript

html

javascript

validation

date

html-input