0
245
VistasObtenga el valor exacto del evento onChange en react.js
Estoy tratando de obtener el valor de la fecha onChange:
<Flatpickr data-enable-time name="goodsreadyby" options={{ minDate: date, enableTime: true, dateFormat: 'Ymd H:i:s' }} onChange={(date) => {setGoodsReadyBy({date}) }}/>Mi problema es que obtengo el evento Array onChange. Corrientemente :
{date: Array(1)} date: Array(1) 0: Sat Mar 05 2022 16:20:00 (Some Standard Time) [[Prototype]]: Object length: 1 [[Prototype]]: Array(0) [[Prototype]]: Object Pero necesito el valor como Sat Mar 05 2022 16:20:00 (Some Standard Time) solamente. ¿Cómo modifiqué mi código para obtener el valor exacto que necesitaba?
3 Respuestas
Responde la pregunta0
El primer parámetro de la propiedad onChange de Flatpickr es Fechas selectedDates : una matriz de Fechas (puede acceder al primero con Fechas selectedDates[0] y formatearlo como lo haría con cualquier Fecha).
El segundo es dateStr , según el formato de la opción dateFormat .
export default function App() { return ( <Flatpickr data-enable-time name="goodsreadyby" options={{ enableTime: true, dateFormat: "Ymd H:i:s" }} onChange={(selectedDates, dateStr, instance) => { const firstDate = selectedDates[0]; console.log({ firstDate, dateStr }); }} /> ); }onChange recibirá 3 argumentos cuando se llame. Estos son:
- Fechas
selectedDates: una matriz de objetos de fecha seleccionados por el usuario. Cuando no hay fechas seleccionadas, la matriz está vacía.dateStr: una representación de cadena del último objeto de fecha seleccionado por el usuario. La cadena se formatea según la opción dateFormat.instance: el objeto flatpickr, que contiene varios métodos y propiedades.
0
Puede imprimir la fecha como,
goodsReadyBy?.date[0].toString()Código para obtener solo la cadena de fecha:
const App = () => { const [goodsReadyBy, setGoodsReadyBy] = useState(); return ( <div> <Flatpickr data-enable-time name="goodsreadyby" options={{ enableTime: true, dateFormat: "Ymd H:i:s" }} onChange={(date) => { setGoodsReadyBy({ date }); }} /> <p> {goodsReadyBy?.date[0].toString()} </p> </div> ); };Códigosycaja:
0
Bueno, su matriz solo tiene un elemento, por lo que puede usar el código a continuación.
onChange={(date) => {setGoodsReadyBy({date[0]})Te dará los datos en el formato que necesites.