0

Buenas quisiera que me ayuden en esto, tengo un datepicker que tiene el formato dd/mm/yy, el cual se registra en mysql como yy/mm/dd causándome que la fecha se registre por ejemplo 12-06-2021 como 2012-06-21,cambiando el formato a yy/mm/dd me va de maravilla pero, como hago para que se registre correctamente con el formato dd/mm/yy.

<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" name="fecha_crea" data-week-start="1" data-autoclose="true" data-today-highlight="true" data-date-format="dd/mm/yy" placeholder="dd/mm/yy">
</div>
</div>

3
  • Hola Luis, por lo genera yo trabajo con el formato por defecto de MySql (YYYY-MM-DD) y solo me preocupo de dar el formato correcto en la capa de presentación. para eso yo trabajo con el LOCALE mas que nada para obtener el formato de fecha según el idioma en el caso que mi app tenga soporte multi lenguaje. por lo que te recomiendo mas preocuparte por dar formato como ya lo estas haciendo. el 12 jun. 2021 a las 18:34
  • En lo q es en mi controlador lo modifique para que al momento de mostrarlo en mi datatable me de el formato d-m-Y con lo siguiente date("d-m-Y", strtotime ($row(fecha), la cual me da como resultado un 12-06-2021.Mi pregunta es como puedo hacer que mysql recepcione correctamente un datapicker con el formato dd/mm/yy. De antemano gracias por la recomendación
    – luis
    el 12 jun. 2021 a las 18:51
  • Revisa esta respuesta acerca del formato para guardar fechas en MySQL, creo que puede aclarar tu duda.
    – Triby
    el 12 jun. 2021 a las 20:15

1 respuesta 1

1

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.