Este es mi código que está validando la entrada y en dd-mm-yyyy pero la función de mostrar el día lo está cambiando a mm-dd-yyyy y, por lo tanto, me da un día incorrecto. he usado la consola para verificar la salida y si desea ver el código ejecutándose https://jsfiddle.net/tjpvhwsc/1/ ingrese 12/01/1994 la salida debe ser 12/01/1994 pero muestra 01 /12/1994
function isValidDate(inputDate){ if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(inputDate)) return false; var parts = inputDate.split("/");//12 01 1994 var day = parseInt(parts[0], 10); var month = parseInt(parts[1], 10); var year = parseInt(parts[2], 10); if(year < 1000 || year > 3000 || month == 0 || month > 12)return false; var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29; return day > 0 && day <= monthLength[month - 1]; } class Inputdate extends React.Component { state={ inputDate:'', day:'' } showDay=(inputDate)=>{ console.log(inputDate) var d = inputDate.split("/\D/"); console.log("REceived date", d) let dt = new Date(d).toLocaleString('en-GB') console.log("new date", dt); // const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] // const weekday = dt.toLocaleString('en-GB') // console.log("Formatted date", weekday); // this.setState({day:weekday}) } render() { console.log(this.state) return ( <div> <input name="date" type="text" value={this.state.value} placeholder="dd/mm/yyyy" onChange={(e)=> { if(isValidDate(e.target.value)){ this.setState({inputDate : e.target.value}) } else{ this.setState({inputDate : 'invalid date'}) } }} /> <p>{this.state.inputDate}</p> <div onClick={()=>this.showDay(this.state.inputDate)}>Show Day</div> </div> ); } }Use type="Date" y e.target.value se formateará de acuerdo con ISO-8601. Para el 12 de enero de 1994, obtendrá 1994-01-12 , que se analizará de forma coherente con new Date() .
O podría ir 1 mejor y usar e.target.valueAsDate y obtener un objeto de fecha real que represente la fecha ingresada.
Con type="date" el controlador onchange solo se activará para una fecha válida también.
function parseDate(){ const date = document.getElementById('date').valueAsDate; console.log(date); console.log(date.toLocaleDateString('en-GB')); } <input type="date" onchange="parseDate()" id="date">