Quiero formar el formato de entrada MM/DD/YYYY. Intenté algunos métodos pero no puedo hacer eso. a continuación he mencionado ese código.
<Input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" name="date" value="" />código mencionado anteriormente, lo intenté pero no funciona ...
Este código funciona, pero obtengo el formato DD/MM/YYYY. Necesito el formato MM/DD/YYYY en el campo de entrada, ¿cómo puedo lograrlo?
type="date" name="currentPeriodStart" id="currentPeriodStart" value={formState.currentPeriodStart || ''} onChange={onChangeDate} />```oficialmente no es posible cambiar el formato. Sin embargo, es posible diseñar el campo, por lo que (con un poco de ayuda de JS) muestra la fecha en el formato que deseemos. Algunas de las posibilidades de manipular la entrada de la fecha se pierden de esta manera, pero si el deseo de forzar el formato es mayor, esta solución podría ser una forma. Un campo de fecha se queda solo así:
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2022-07-15">El resto es un poco de CSS y 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">