1

Buen día a todos,

Tengo un pequeño proyecto personal y lo estoy haciendo con React.js, aunque apenas lo acabo de aprender hace una semana. Estoy intentando tomar los valores de un input al momento de que este cambie de valor, luego este valor se almacena en un state del componente. Tengo un problema con un input date, al seleccionar una fecha, el objeto que se almacena en el state es distinto al que selecciono.

Por ejemplo si selecciono 1/11/2021, la fecha que se almacena es 31/10/2021 19:00:00. en la siguiente imagen pueden ver que el input 'Fecha de Desembolso' está seleccionado 1/11/2021, pero la fecha que aparece en el state es 'Sun Oct 31 2021 19:00:00 GMT-0500 (hora estándar de Perú)'

introducir la descripción de la imagen aquí

El input que renderiza es el siguiente.

introducir la descripción de la imagen aquí

Luego que renderiza el input, y hago un cambio en el input este se guarda en el state mediante esta función.

introducir la descripción de la imagen aquí

¿Por qué toma otra fecha?

Adjunto mi código, solo una parte, porque es muy extenso.

    class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      prestamo: "",
      plazo: "",
      unidadPlazo: "",
      gastoInicial: "",
      gastoCuota: "",
      formaPago: "",
      diapago1: 1,
      diapago2: 0,
      tasa: "",
      tipoTasa: "",
      fechaDesembolso: "",
      fechaCuota1: "",
      showMesesEspeciales: false,
      showResult: false,
      mesesEspeciales: {
        enero: 1,
        febrero: 1,
        marzo: 1,
        abril: 1,
        mayo: 1,
        junio: 1,
        julio: 1,
        agosto: 1,
        setiembre: 1,
        octubre: 1,
        noviembre: 1,
        diciembre: 1,
      },
      mesesEspecialesQ: {
        enero: 1,
        febrero: 1,
        marzo: 1,
        abril: 1,
        mayo: 1,
        junio: 1,
        julio: 1,
        agosto: 1,
        setiembre: 1,
        octubre: 1,
        noviembre: 1,
        diciembre: 1,
      },
    };


    
    this.handleFechaDesembolso = this.handleFechaDesembolso.bind(this);
    this.handleFechaCuota = this.handleFechaCuota.bind(this);
  }

    handleFechaDesembolso(e) {
    this.setState({
      fechaDesembolso: new Date(e.target.value),
    });
  }

  handleFechaCuota(e) {
    this.setState({
      fechaCuota1: new Date(e.target.value),
    });
  }

    render() {
    return (
      <main>
            <div className="fecha-desembolso">
              <label htmlFor="fecha-desembolso">Fecha de Desembolso *</label>
              <input
                type="date"
                name="fecha-desembolso"
                id="fecha-desembolso"
                defaultValue={this.state.fechaDesembolso}
                onChange={this.handleFechaDesembolso}
              />
            </div>
            <div className="fecha-cuota-1">
              <label htmlFor="fecha-cuota-1">Fecha de 1° cuota</label>
              <input
                type="date"
                name="fecha-cuota-1"
                id="fecha-cuota-1"
                defaultValue={this.state.fechaCuota1}
                onChange={this.handleFechaCuota}
              />
            </div>
      </main>
    );
  }
}

1 respuesta 1

1

Lo solucione, con una publicacion aca mismo, al momento de convertir el valor del input con 'new Date' tenía que agregarle la hora para que tome valor 00:00:00.

en mi caso queda, así

` handleFechaDesembolso(e) {
    this.setState({
      fechaDesembolso: new Date(e.target.value+'T00:00:00'),
    });
  }`

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.