如何將 HTML 輸入日期格式默認更改為 mm/dd/yyyy

Question

我想形成輸入格式 MM/DD/YYYY。 我嘗試了一些方法，但我做不到。 下面我已經提到了該代碼。

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

上面提到的代碼，我試過了，但它不工作......

此代碼有效，但我得到 DD/MM/YYYY 格式。 我需要輸入字段中的 MM/DD/YYYY 格式，所以我該如何實現。

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

Answer 1

正式不可能更改格式。 然而，可以對字段進行樣式設置，因此（在一點 JS 幫助下）它以我們想要的格式顯示日期。 操作日期輸入的一些可能性以這種方式丟失，但如果強制格式的願望更大，這種解決方案可能是一種方法。 日期字段僅保持這樣：

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

剩下的就是一點 CSS 和 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">