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

Question

I am relatively new to Javascript and I have been asked to create a date calculator which will work out what age you are in comparison to the date 31st March 2019 I have got that part working but the client has requested that they be able to fill in the date as DD/MM/YYYY rather than the default MM/DD/YYYY!?

I have tried using a Bootstrap date picker and changing to a text input but I keep getting an invalid date !?

This feels like it should be a line of code that I am missing but a few of the examples I have tried have not worked for me.... so here is my JS and HTML that I am using for it at the moment if anyone can help with this it would be much appreciated!

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

Try using this function, it will return date as 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

To format date in dd-mm-yyyy or dd/mm/yyyy in js, You will need a function that can do formatting. There is no built-in helper function that provide such facility in js. However, we are waiting for date formatting method as a prototype-method in upcoming js version. For now, you have a workaround like given below.

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

call formattor with date and optional separator argument and it will return the formatted date. Here i prefixed the day and month because we need to handle the single digit value and month is incremanted by 1 because the month index starts from 0, wheres the human readable month starts with 1.