Estoy tratando de formatear fechas ISO con date-fns en Vue:
2022-01-13T14:06:33.612Z 1988-06-22T08:03:20.098Z 2021-12-03T14:50:34.060Zpara formatearlos en 13.01.2022. Hay algunos casos (digamos 10 entradas) donde recibí los siguientes formatos:
1999-Dec-26o
Wed Jan 05 2022 22:15:22 GMT+0100 (Central European Standard Time)También a veces devuelve:
[Vue warn]: Error in v-on handler: "RangeError: Invalid time value"Me sorprende que date-fns https://date-fns.org/docs/Getting-Started no tenga ningún método para detectar formatos. ¿Alguna sugerencia? ¡Gracias por adelantado!
convertIso (date) { if (date !== "") { date = new Date(date); if (isValid(date) === true) { return format(date, "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z } else { if (isDate(date)) { const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26 const formatDate = format(parseDate, "dd.MM.yyyy"); // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value" return formatDate; } else { return ""; } } } }o
convertIso (date) { if (date !== "") { if (isValid(new Date(date)) === true) return format(new Date(date), "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z } else { if (isDate(date)) { const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26 const formatDate = format(parseDate, "dd.MM.yyyy"); // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value" return formatDate; } else { return ""; } } } }Sí, trabajar con fechas es un desastre en JS. De todos modos, abordemos el problema poco a poco.
En las líneas a continuación, parece que lib no está formateando realmente, supongo que por alguna razón no puede leer el parámetro de fecha como fecha, por lo que le sugiero que lo analice primero de manera similar a lo que está haciendo en el segundo si declaración
if (isValid(date) === true) { return format(date, "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z }Como esto. Pero considere cambiar el formato de 'MMM' a 'MM' para obtener 12 en lugar de Dec
if (isDate(date)) { const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26 const formatDate = format(parseDate, "dd.MM.yyyy"); // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value" return formatDate; }Eso obtendría sus fechas en el formato correcto que desea (13.01.2022), pero no solucionará el error de Vue "RangeError: valor de tiempo no válido" porque su formato es simplemente una fecha, no un DateTime. Podría considerar extender su patrón de fecha "dd.MM.yyyy" para que sea algo así como "dd-MM-yyyy'T'HH:mm:ss.SSSxxx" para incluir la hora.
por supuesto, no tienes que seguir exactamente mi ejemplo, no tienes que usar la 'T'. Ajusta como quieras. Solo asegúrese de que Vue pueda encontrar algún valor de tiempo para leer.
Finalmente, solo quiero decir que no usé esta lib antes, así que si tomé un tiro en la oscuridad aquí. Si me perdí algo por favor hágamelo saber.
Además, si no está demasiado interesado, ¿puedo sugerirle que use day.js ? Lo uso en tales casos y me da una experiencia agradable cada vez que lo uso.