Estoy usando la biblioteca react-flatpickr como selector de fechas para mi proyecto. El problema al usar la biblioteca es que si selecciono cualquier fecha, siempre considera la hora como 00:00:00. Debido a tal comportamiento, crea un problema cuando los usuarios de diferentes zonas horarias guardan la fecha.

¿Hay alguna forma de pasar la hora local del usuario también cuando el usuario selecciona la fecha?

También miré en enableTime: true, que también permite elegir la hora. Esta opción tampoco tiene ninguna forma de establecer la hora actual.

Aquí está mi código.

const options = {
  enableTime: false,
  dateFormat: 'd-m-Y'
};

        <Flatpickr
          placeholder="Select date"
          ref={datepickerRef}
          options={options}
          value={props.field.value ? props.field.value : ''}
          onChange={(date) => {
            let selectedDate = new Date(date[0]);
            props.form.setFieldTouched(props.field.name);
            props.form.setFieldValue(props.field.name, selectedDate);
          }}

        />

A las 06:41 PM,

Salida: Fri Oct 11 2019 00:00:00 GMT+0530 (India Standard Time)

Resultado esperado: Fri Oct 11 2019 18:41:00 GMT+0530 (India Standard Time)

1
Saurabh Modh 11 oct. 2019 a las 16:14

1 respuesta

La mejor respuesta

Como la biblioteca no admite ese formato, podemos configurar la hora personalizada para la fecha seleccionada utilizando el método nativo setHours(hours,min,sec).

Obtenga la hora actual y establezca esos valores en la fecha seleccionada

<Flatpickr
          placeholder="Select date"
          ref={datepickerRef}
          options={options}
          value={props.field.value ? props.field.value : ''}
          onChange={(date) => {
            let selectedDate = date[0];
            let currentDate = new Date();
            let selectedDateWithCurrentTime = new Date(
              selectedDate.setHours(currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds())
            );
            console.log('selectedDateWithCurrentTime',selectedDateWithCurrentTime); // Fri Oct 11 2019 19:47:53 GMT+0530 (India Standard Time)
            props.form.setFieldTouched(props.field.name);
            props.form.setFieldValue(props.field.name, selectedDateWithCurrentTime.toISOString());
          }}
        />

Consulte el ejemplo aquí https://codesandbox.io/s/flatpicker-with-current -time-txdsx

0
rselvaganesh 11 oct. 2019 a las 14:22