Pienso que se podría hacer de varias maneras, la primera que se me ocurre es la siguiente:
//botón de submit
const button = document.querySelector('#submit-button');
button.addEventListener('click', () => {
//obtenemos el valor del input
const value = document.querySelector('#fecha_crea').value.trim();
//convertirmos el valor a fecha
const date = new Date(value);
//validamos que la fecha sea válida
if (date.toString() === 'Invalid Date') {
alert('Por favor, ingresa una fecha válida');
return;
}
//obtenemos el mes
const month =
date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1;
//obtenemos el día
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
//creamos la fecha para mysql
const dateToMysql = `${date.getFullYear()}-${month}-${day}`;
console.log(dateToMysql);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Cambiar formato de input</title>
</head>
<body>
<div class="form-group row">
<label class="col-12" for="fecha_crea">Fecha</label>
<div class="col-lg-3">
<input
type="date"
class="js-datepicker form-control"
id="fecha_crea"
/>
<button id="submit-button">Pulsame</button>
</div>
</div>
</body>
</html>
Lo que se acaba de hacer es simplemente coger el input date típico, y convertir a una variable tipo Date
y ya de esa manera o le pasas directamente la variable tipo Date
a mysql o le pasas el string que mande a consola.
Luego también podría ser de otra manera, la cual es creando tu propio input de texto con tu propio formato de fecha, así:
//botón de submit
const button = document.querySelector('#submit-button');
const regex = /^\d{4}\/\d{2}\/\d{2}$/;
button.addEventListener('click', () => {
//obtenemos el valor del input
const value = document.querySelector('#fecha_crea').value.trim();
//válidamos el formato del input
if (!regex.test(value)) {
alert('Por favor ingresa una fecha válida');
return;
}
console.log(value);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Cambiar formato de input</title>
</head>
<body>
<div class="form-group row">
<label class="col-12" for="fecha_crea">Fecha</label>
<div class="col-lg-3">
<input
type="text"
class="js-datepicker form-control"
id="fecha_crea"
placeholder="YYYY/MM/DD"
/>
<button id="submit-button">Pulsame</button>
</div>
</div>
</body>
</html>
Ahí estoy validando con un regex sencillo, pero ya es tu decición mejorar el regex y agregarle más cosas, pienso que la base ahí está.
Aquí te dejo algunos enlaces útiles con las cosas que utilizé:
https://developer.mozilla.org/es/docs/Web/HTML/Element/input/date
https://developer.mozilla.org/es/docs/Web/HTML/Element/input/text
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/es/docs/Web/API/Document/querySelector
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/return
https://developer.mozilla.org/es/docs/Web/API/Window/alert
https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener