希望使输入=日期接受Java中的DD / MM / YYYY格式

时间:2018-08-19 00:25:21

标签: javascript validation date datetime html5-input-date

我对Java语言还比较陌生,因此我被要求创建一个日期计算器,该计算器可以计算出与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>

3 个答案:

答案 0 :(得分:2)

尝试使用此功能,它将返回日期为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;
}

答案 1 :(得分:0)

我设法通过在变量birthDate的末尾添加一个分隔符来解决此问题,然后使用text = input形式为dd / mm / yyyy

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

答案 2 :(得分:0)

要在js中的dd-mm-yyyydd/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;
  }

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