1

There is an date input of this form inside a React component:

<input
  className="my-class"
  type="date"
  name="dateFrom"
  data-testid="dateFrom"
  value={dataFields.dateFrom}
  onChange={(e) =>
    setDataFields({ ...dataFields, dateFrom: e.target.value })
  }
  disabled={disabledFields.dateFrom}
/>

Opening it with Chrome, there is a placehoder dd/mm/yyyy, opening it in Firefox, the month and day are swapped: mm/dd/yyyy.

I want to use the first format (dd/mm/yyyy) for all browsers.

So I added a placeholder but it seems to ignore it, is there a way to show that format all the time?

<input
  className="my-class"
  placeholder="dd/mm/yyyy" // added this line
  type="date"
  name="dateFrom"
  data-testid="dateFrom"
  value={dataFields.dateFrom}
  onChange={(e) =>
    setDataFields({ ...dataFields, dateFrom: e.target.value })
  }
  disabled={disabledFields.dateFrom}
/>
Jean Pierre
  • 281
  • 8
  • 21

0 Answers0