How to change HTML input date format default to mm/dd/yyyy

Question

I want to form input format MM/DD/YYYY. I tried some methods but I can't do that. below I have mentioned that code.

                            <Input
                              type="text"
                              pattern="\d{1,2}/\d{1,2}/\d{4}"
                              name="date"
                              value=""
                            />

above mentioned code, I tried but it's not working...

This code is working, but i get DD/MM/YYYY format. i need the MM/DD/YYYY format in the input field so how can i achive that.

                                 type="date"
                                 name="currentPeriodStart"
                                 id="currentPeriodStart"
                                 value={formState.currentPeriodStart || ''}
                                 onChange={onChangeDate}
                               />```

Answer 1

it is officially not possible to change the format. However it is possible to style the field, so (with a little JS help) it displays the date in a format we desire. Some of the possibilities to manipulate the date input is lost this way, but if the desire to force the format is greater, this solution might be a way. A date fields stays only like that:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2022-07-15">

The rest is a bit of CSS and JS: http://jsfiddle.net/g7mvaosL/

 $("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format( this.getAttribute("data-date-format") ) ) }).trigger("change")

 input { position: relative; width: 150px; height: 20px; color: white; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">