Convertir una cadena en una fecha en JavaScript

1. Utilice la función new Date() para convertir la cadena en fecha en JavaScript
2. Utilice la función Date.parse() para convertir la cadena en fecha en JavaScript
3. Dividir cadena y convertirla en fecha en JavaScript
4. Conclusión

A veces es necesario convertir una cadena en un formato de fecha. La cadena puede ser un valor de fecha almacenado como una cadena en la base de datos o un valor devuelto por la API. En cualquier caso, este valor de cadena no se puede utilizar directamente en los selectores de fecha o en el tipo de entrada fecha. Por lo tanto, la cadena deberá convertirse en un objeto de fecha para que se muestre en la interfaz de usuario HTML. Al estar en formato de cadena, no es posible realizar operaciones específicas de fecha. Por lo tanto, necesitamos convertir la cadena en un objeto de fecha. Aquí enumeramos algunas formas de convertir una cadena en una fecha:

• new Date()
• Date.parse()
• Dividir y convertir a fecha

Utilice la función new Date() para convertir la cadena en fecha en JavaScript

La forma más utilizada para convertir una cadena a la fecha es con la función new Date(). New Date() toma argumentos en varias formas descritas a continuación pero devuelve un objeto de fecha.

1. Sin parámetros como argumento. new Date() devolverá la fecha y hora actual del sistema, incluida la información de la zona horaria en la hora del sistema local, si no se pasa ningún parámetro a la función new Date().
2. Pasar el objeto de fecha como argumento. El nuevo Date() devolverá un objeto de fecha como se muestra en la cadena de fecha pasada como argumento.
3. Pasando una fecha de cadena. La parte más interesante de la función new Date('2018-12-3') es que puede convertir una fecha pasada en un formato de cadena como un argumento en un formato de fecha. Discutiremos esto en detalle.

Pasar la fecha de la cadena como argumento

Cuando pasamos una fecha en formato de cadena a la new Date(), se convierte en un objeto de fecha. El formato de cadena debe ser YYYY-MM-DD, el formato ISO 8601, para que funcione. Es posible que otros formatos de fecha no se conviertan en un objeto de fecha mediante este método. Por ejemplo, consulte el código de la siguiente manera:

new Date('2021-05-23');
new Date('2020/2/29');
new Date('2020-14-03');
new Date('14-02-2021');

Producción :

Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date

Como puede ver en los ejemplos anteriores, el único formato de cadena aceptado para la fecha es 2021-05-23 y 2020/2/29. La función new Date() puede procesar cadenas en el formato YYYY-MM-DD o YYYY/MM/DD. Si tenemos un formato de cadena diferente que no se ajusta a las normas ISO 8601, la new Date() no podrá analizar la fecha y volverá como una Dateno válida.

Observaciones

• new Date() se puede utilizar para convertir la cadena en una fecha solo si cumple con el formato ISO 8601 YYYY-MM-DD hh:mm:ss.
• Para un formato diferente que no puede ser comprendido por new Date(), es mejor dividir la cadena y pasarlos como argumentos a la new Date(), como se presenta más adelante en este artículo.
• new Date() también puede convertir una cadena con el formato 01 Mar 2020 12:30 o incluso MM DD YYYY HH:mm. En caso de que estemos utilizando un valor pasado desde el backend a través de la API para la conversión, debemos asegurarnos de que el formato pasado sea el que entiende la función new Date(), y es bueno tener una verificación de que new Date() devuelve un objeto de fecha válido. De lo contrario, el código puede romperse.

Utilice la función Date.parse() para convertir la cadena en fecha en JavaScript

Date.parse() es una opción alternativa para convertir la fecha de la cadena. Devuelve un valor numérico en lugar de un objeto de fecha. Por lo tanto, requerirá un procesamiento adicional si espera un objeto de fecha. Convierte la fecha analizada en un número que representa los milisegundos transcurridos desde la medianoche del 1 de enero de 1970. Es similar al formato de marca de tiempo con la diferencia de que en lugar de segundos, Date.parse() devuelve un valor de milisegundos.

Date.parse('2020-11-21')
Date.parse('2019-01-01T12:30:00.000Z')
Date.parse('20-11-2021')
Date.parse('11-20-2021')

Producción :

1605916800000
1546345800000
NaN
1637346600000

Vale la pena señalar que Date.parse() es lo mismo que new Date() cuando se trata del tipo de valores de entrada que puede aceptar, pero ofrece una mejor verificación manual si la fecha tiene un formato válido. Este método resulta útil, especialmente cuando se trata de un valor de respuesta de API. En tales casos, es posible que necesitemos realizar una verificación para asegurarnos de que el valor devuelto por el backend se ajusta al formato de fecha aceptado por la función Date.parse() o incluso la función new Date(). Solo una verificación isNaN() puede ayudar a identificar y aterrizar de manera segura en el método de conversión de fecha.

let stringsFromAPI = ['2020-11-21', '20-11-2021'];

stringsFromAPI.forEach((d) => {
  if (!isNaN(Date.parse(d))) {
    console.log(new Date(d));
  }
})

Producción :

Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)

Tenga en cuenta que aquí la fecha 20-11-2021 tiene el formato DD-MM-AAAA. Por tanto, no se entenderá por la función Date.parse() ni por la función new Date(). Por lo tanto, si stringsFromAPI era un valor proveniente del backend, entonces la función anterior convertirá solo aquellas fechas que se ajusten al formato aceptable. El !isNaN(Date.parse(d)) rechaza silenciosamente el valor de fecha incorrecto y registra el valor que tiene éxito en la conversión.

Observaciones

• Date.parse() es similar a new Date() excepto por el tipo de retorno, que lo hace adecuado para verificar si un valor de fecha tiene un formato correcto y también se puede usar para asignar una fecha usando el dateObj.setTime(Date.parse(DateString)).
• En comparación con el sello de tiempo de Unix, el Date.parse() devuelve milisegundos que se pueden utilizar para la comparación precisa de fechas incluso sin convertirlas en objetos de fecha reales con new Date().
• Date.parse() utiliza internamente el new Date() para analizar la fecha, por lo que los formatos aceptados por la función new Date() también serán compatibles con la función Date.parse().

Dividir cadena y convertirla en fecha en JavaScript

Las funciones Date.parse() y new Date() están diseñadas en base al formato de fecha ampliado ISO 8601. A veces, si la fecha no se ajusta al formato esperado, tendremos que resolverlo manualmente dividiendo la cadena de fecha, extrayendo los valores y convirtiéndolos en un objeto de fecha. Sorprendentemente, el new Date() también admite que los parámetros de fecha se pasen como argumentos, y obtenemos el objeto de fecha como salida.

La sintaxis para crear una fecha a partir de argumentos:

new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)

Dónde,

• yearValue: debe ajustarse al formato ISO 8061 YYYY. Por ejemplo, 2021. Si especificamos un valor en el formato YY, lo tomará mal. Por ejemplo, solo mencionar 21 para 2021 se tomará como 1921 en lugar de 2021.
• IndexOfMonth: comienza con el índice 0. Por lo tanto, reste 1 del valor del mes. Por ejemplo, para marzo, el valor es 3, pero monthIndex será 2 (es decir, 3-1 = 2). El índice del mes normalmente debería estar en el rango 0-11
• dayValue: Indica el día del mes. Debe estar en el rango de 1 a 31, dependiendo de la cantidad de días en un mes. Por ejemplo: para 21-05-2021, el valor del día es 21
• horas: la hora del día. Por ejemplo, las 10 en punto.
• minutos: los minutos después de una hora.
• segundos: retiene el valor del segundo después de un minuto.

La siguiente es una función que toma una cadena con un formato de fecha personalizado - DD-MM-YYYTHH:mm:SS y devuelve un objeto de fecha.

function convertFromStringToDate(responseDate) {
  let dateComponents = responseDate.split('T');
  let datePieces = dateComponents[0].split('-');
  let timePieces = dateComponents[1].split(':');
  return (new Date(
      datePieces[2], (datePieces[1] - 1), datePieces[0], timePieces[0],
      timePieces[1], timePieces[2]))
}

convertFromStringToDate('21-03-2020T11:20:30')

Producción :

Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)

Conclusión

La función new Date() más utilizada es bastante útil para convertir una fecha de cadena en un objeto de fecha, siempre que la cadena cumpla con el formato ISO 8601. En comparación con el new Date(), la función Date.parse() difiere en que devuelve un valor numérico que contiene los milisegundos desde el primero de enero de 1970 que transcurrieron hasta la fecha pasada como un argumento de cadena. Se puede convertir un formato de fecha diferente dividiendo la cadena de fecha y pasando los componentes de fecha como argumentos a la función new Date().