Change output format of Date field in HTML form

Question

We have a HTML form and I have pasted the code for our Date of Birth field below. When the user enters the date, it requests it in dd/mm/yyyy format. However, once they click off the field, it changes to yyyy/mm/dd. As a result, our CRM is not accepting it because of the format. Is there a way to keep it as dd/mm/yyyy?

    <label><span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="100" placeholder="Date of Birth" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" required="true" data-cip-id="00N0Y00000RWiNa"></span></label>

Thanks James

Answer 1

first it would be good to make sure you have only one "id" attribute on the input field.

Here is an example that might help you.

Here I removed the first id to get rid of the error in jsfiddle.net

function formatDate() {
  // select element
  const date = document.querySelector('#date');
  // pick up date
  let currentValue = date.valueAsNumber;
  // change type
  date.type = "text";
  // update value with prev set value from date picker
  date.value = new Date(currentValue).toLocaleDateString('en-GB');
}

<label>
  <span class="dateInput dateOnlyInput">
    <input name="00N0Y00000RWiNa" 
    size="100" 
    placeholder="Date of Birth" 
    class="textbox-n" 
    type="text" 
    onfocus="(this.type='date')" 
    onblur="formatDate()" 
    required="true" 
    data-cip-id="00N0Y00000RWiNa" 
    id="date">
  </span>
</label>