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}
                               />```

Could you share your code with a code snippet for easy testing? — toptecshare, Jul 15 '22 at 15:23
I would bet that this is based on your browser's/computer's region settings. — phuzi, Jul 15 '22 at 15:24
Does this answer your question? [Is there any way to change input type="date" format?](https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format) — kennarddh, Jul 15 '22 at 15:26

score 1 · Answer 1 · answered Jul 15 '22 at 15:30

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">

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

1 Answers1

Linked