Date Formatting in Input

Question

The value attribute of input tag only accepts the YYYY-mm-dd format

<input type="date" value="YYYY-mm-dd">

In my app the user birth date is returned in the format: Jan 1, 1999

If I do this nothing happens:

<input type="date" value="Jan 1, 1999">

So how can I display the user birth date if the format I have is different, maybe write a javascript function that returns the correct format but then the problem is how do you stick that function to an attribute

You can refer to this answers : https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date?rq=1 — Rohit Tagadiya, Oct 28 '20 at 12:39
Please [edit] your question with that information, and also include what framework/library you're using (React, Angular, etc.). Add the tag for it as well. — Heretic Monkey, Oct 28 '20 at 12:58
Date displayed in the `date` type `input` depends on the locale of the user's browser but the parsed value of the date is always in the format: `yyyy-mm-dd`. If you have a date string in a different format, you need to convert it to the valid format, i.e. `yyyy-mm-dd` — Yousaf, Oct 28 '20 at 13:12

score 0 · Answer 1 · answered Oct 28 '20 at 12:40

0

You can add Jquery Datepicker,

Jquery Datepicker

In this you can able to set the which type of format you want

Jquery Datepicker format

answered Oct 28 '20 at 12:40

Gokul

101
1
5

score 0 · Accepted Answer · answered Oct 28 '20 at 13:28

You can translate the string you get to a input type=date's value with vanilla Javascript.

Demo:

<label> click to set value
  <input type="text" value="Jan 1, 1999 " onfocus="document.querySelector('#date').valueAsDate = new Date(new Date(this.value).setDate(new Date(this.value).getDate() + 1))" />
</label>
<label>
Input date:
<input id="date" type="date" value="0"> 
</label>

You will happy to read about .valueAsDate here,

And since it get the day before, i fixed it with setting the date to the day after - You can read about it here.

Date Formatting in Input

2 Answers2