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

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>

Any browser with support for the date input will only accept ISO-8601 date values (`YYYY-MM-DD`) - if you need to allow anything else, you need to use a regular text input. If you only want to control the format for entry, a masking plugin is probably the way to go. — Tieson T., Aug 19 '18 at 02:03

score 1 · Accepted Answer · answered Aug 19 '18 at 01:41

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

answered Aug 19 '18 at 01:41

Sushant Magoo

354
4
14

Thanks so that worked in terms of accepting the input=text but it still only seems to accept mm/dd/yyyy !? Is there anything else I may need to change ? – andrew rainey Aug 19 '18 at 18:59
@andrewrainey—all this does is generate a string in format dd/mm/yyyy, it doesn't actually help you with anything. – RobG Aug 19 '18 at 21:58
Thanks for this I managed to get it working in the end by using your code with another change to a variable – andrew rainey Aug 20 '18 at 12:19

score 0 · Answer 2 · answered Aug 20 '18 at 12:23

I managed to solve the issue by adding a split to the end of the variable birthDate which then allowed the dd/mm/yyyy using text=input for the form

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

score 0 · Answer 3 · answered Sep 15 '19 at 14:29

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.

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

3 Answers3