I set the value in the input type = 'date', but I don’t want to be displayed in Chrome.

<input type='date' pattern='(?:(?:0[1-9]|1[0-9]|2[0-9]).(?:0[1-9]|1[0-2])|(?:(?:30).(?!02)(?:0[1-9]|1[0-2]))|(?:31.(?:0[13578]|1[02]))).(?:19|20)[0-9]{2}' value='09.05.2017'/>

If you set value = '2017-05-09', then it shows in Chrome, but in Firefox it goes in the wrong recording format - '2017-05-09'.

Javascript will not be used in this case!

How to make both Firefox and Chrome show the value of '09 .05.2017 '? How can I explicitly set the date format for Chrome?

    1 answer 1

    Not all browsers support dates with inputs. Accordingly, all browsers that do not support them will make the text input and display exactly the value that is spelled out in value .

    By the way, it seems, the input with the date in the FF will appear soon, because it is already under the flag.

    A possible solution is to use two input fields, but only show one of them, depending on the support of input lines with dates.

    This can be done without using javascript: https://jsfiddle.net/s7bLsLu4/

     input[type="date"] { display: none; } #date-check:invalid ~ main input[type="date"] { display: inline-block; } #date-check:invalid ~ main input[type="date"] + input[type="text"] { display: none; } 
     <input type="date" id="date-check" required value="not a date"> <main> <p> <input type="date" value="2017-05-09" /> <input type="text" value="09.05.2017" /> </p> <p> <input type="date" value="2017-05-09" /> <input type="text" value="09.05.2017" /> </p> </main>

    Tested in Chrome 58 (date), FF 53 (text), Edge 15 (date) and IE 11 (text).

    True, the labels will also have something to wise.

    • Thank. I was hoping that somehow it would be possible to specify the recording format through the pattern for chrome, but by standards it displays the format from the browser locale settings. I tried to set the two values, but I didn’t care how bad it was anyway. - CodeGust
    • @CodeGust, updated the answer. And how to display, I think the user knows better if the date is natively supported. - Qwertiy ♦
    • Thank!!! This is great! Really great solution! - CodeGust