0

I want to know if there is a way to change HTML input type="date" element from this:

enter image description here

to something like:

mm.dd.yyyy

So I want to know how to change the separator.

Is there a way to do this or should I use some custom date component ?

whatamidoingwithmylife
  • 1,119
  • 1
  • 16
  • 35

2 Answers2

0

Try this.

<input id="date" type="date" value="2017-06-01">

Note that its also depends on browser potentional website user is using. :)

0

You need pattern attrib in your input to match your desired format however not all browsers support that. Workaround is to use input="text" instead and then use your custom code.

As per MDN: One way around this is to put a pattern attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

pattern: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern

Rikin
  • 5,351
  • 2
  • 15
  • 22
  • Read that already, I am not considered about final output as I have custom function that formats the date, however I need to change the default "mm/dd/yyyy" to "mm.dd.yyyy" if possible. – whatamidoingwithmylife Apr 10 '18 at 12:54
  • May be you can use hacky workaround of using both input text/date and show hide one at a time based on if user is changing it or not and use pattern formatting in input text. And you can sanitize/remove one input before form submission. – Rikin Apr 10 '18 at 12:59
  • The project is internal and I was asked to change the date format if possible, it has no value whatsoever so I'll just explain to my superior that format can't be changed by any standard/normal means. – whatamidoingwithmylife Apr 10 '18 at 13:01
  • Thank you for your help anyway. – whatamidoingwithmylife Apr 10 '18 at 13:01