29. Fechas en JavaScript - Curso JavaScript - OpenBootcamp

Summary

En este video se aborda el manejo de fechas en JavaScript, explicando las cuatro formas de inicializar una fecha y cómo trabajar con objetos de tipo 'Date'. Se detalla cómo comparar fechas, obtener información específica como día, mes y año, y cómo mostrar fechas en diferentes formatos y idiomas utilizando el método 'toLocaleDateString'. El contenido es esencial para cualquier desarrollador que requiera trabajar con fechas en sus proyectos.

Takeaways

• 📅 Las fechas en JavaScript se pueden definir de diferentes maneras, incluyendo la utilización del objeto Date y la inicialización con diferentes parámetros.
• 📅🌟 Existen cuatro formas principales de inicializar fechas en JavaScript: sin parámetros, con parámetros específicos (año, mes, día, hora, minutos, segundos, milisegundos), a partir de milisegundos y a través de strings.
• 📅🔄 Al inicializar una fecha sin parámetros, JavaScript utiliza la fecha y hora actuales.
• 📅🗓️ Al pasar un número de milisegundos a la función Date, se obtiene una fecha a partir del 1 de enero de 1970.
• 📅🔄 Las fechas se pueden comparar utilizando operadores como 'mayor que' o 'menor que', pero para comparar la igualdad, es necesario convertirlas a milisegundos utilizando el método getTime.
• 📅📅 Para obtener el día, mes y año de una fecha, se pueden utilizar los métodos getDate, getMonth (requiere sumar 1) y getFullYear.
• 📅🌐 Para mostrar una fecha en un formato de cadena, se puede utilizar el método toLocaleDateString, que permite personalizar la salida según el idioma o localización.
• 📅🌐📅 El método toLocaleDateString también permite mostrar la fecha en diferentes formatos según el local (por ejemplo, EE. UU., Reino Unido, Corea, Irán, Egipto, japonés, etc.).
• 📅💻 En el script se menciona la utilidad de conocer cómo trabajar con fechas en proyectos grandes y cómo mostrar fechas de manera legible y personalizada.
• 📅🔗 Se proporciona una URL para explorar diferentes formatos de fecha y localizaciones, lo que puede ser útil para adaptar la visualización de fechas a diferentes regiones.
• 📅📌 El video finaliza con la intención de continuar el tema en un próximo video, lo que implica que esta información es parte de una serie de contenidos relacionados.

Q & A

¿Cómo se almacenan las fechas en JavaScript?

Las fechas en JavaScript se almacenan como objetos.

Cuántas formas diferentes existen para inicializar fechas en JavaScript?

Existen cuatro formas diferentes de inicializar fechas en JavaScript.

¿Cómo se inicializa una fecha por defecto en JavaScript?

Se inicializa una fecha por defecto simplemente con 'new Date()'.

¿Qué parámetros son obligatorios al inicializar una fecha con 'new Date()'?

El año y el mes son parámetros obligatorios al inicializar una fecha con 'new Date()'.

¿Cómo se pueden inicializar fechas a través de milisegundos en JavaScript?

Las fechas se pueden inicializar a través de milisegundos utilizando 'new Date(milliseconds)'.

¿Cómo se compara si una fecha es mayor que otra en JavaScript?

Se pueden comparar fechas usando los operadores 'mayor que' y 'menor que' en JavaScript.

¿Cómo se obtiene el día de la semana en JavaScript?

Se obtiene el día de la semana utilizando el método 'getDate()' en un objeto Date.

¿Cómo se obtiene el mes de una fecha en JavaScript?

Se obtiene el mes de una fecha utilizando el método 'getMonth()' en un objeto Date, recordando que enero es 0 y diciembre es 11.

¿Cómo se obtiene el año de una fecha en JavaScript?

Se obtiene el año de una fecha utilizando el método 'getFullYear()' en un objeto Date.

¿Cómo se puede mostrar una fecha en un formato legible en JavaScript?

Se puede mostrar una fecha en un formato legible utilizando el método 'toLocaleDateString()' en un objeto Date.

¿Qué es la URL que se menciona en el script para ver los formatos de fechas en diferentes idiomas?

La URL no se especifica en el script, pero se menciona que se puede utilizar para ver los formatos de fechas en diferentes idiomas y locales.

Outlines

00:00

📅 Manejando fechas en JavaScript

Este párrafo aborda la manipulación de fechas en JavaScript. Se explica cómo se almacenan las fechas como objetos y se presentan diferentes formas de inicializar fechas, incluyendo la fecha actual, la fecha fija basada en parámetros específicos y la fecha a partir de milisegundos desde el 1 de enero de 1970. También se discute la comparación de fechas, cómo determinar si una fecha es posterior o anterior a otra, y cómo comparar la igualdad entre fechas. Finalmente, se menciona cómo obtener el día, mes y año de una fecha y cómo mostrar una fecha en un formato de cadena de texto legible para el usuario.

05:04

🔢 Trabajando con milisegundos y strings

En este párrafo se profundiza en el uso de milisegundos y strings para definir fechas en JavaScript. Se describe cómo se pueden restar milisegundos del 1 de enero de 1970 para obtener fechas pasadas y cómo se pueden usar strings para definir fechas en un formato legible. Además, se explica cómo se pueden obtener fechas a partir de números enteros y cómo se pueden comparar fechas mediante la conversión a milisegundos. Se resalta la importancia de entender estos conceptos para proyectos más grandes y se sugiere una URL para obtener más información sobre los formatos de fecha en diferentes idiomas y localidades.

10:05

🌐 Internacionalización de fechas en la web

Este párrafo se centra en cómo mostrar fechas de manera que sean legibles para usuarios de diferentes idiomas y localidades. Se presenta el método 'toLocaleDateString' para formatear fechas según el idioma o el país deseado, ejemplificando cómo la misma fecha se muestra de manera diferente en Estados Unidos y en otros lugares. Se enfatiza la importancia de considerar la internacionalización al trabajar con fechas en aplicaciones web, y se sugiere una URL para que el espectador explore diferentes formatos de fecha según los idiomas y localidades.

Keywords

💡Fechas en JavaScript

Las fechas en JavaScript son un conjunto de datos utilizados para representar un momento específico en el tiempo. En el video, se abordan diferentes formas de inicializar y manipular fechas en JavaScript, como objetos, milisegundos y strings. Este concepto es central para el tema del video, que trata sobre la gestión de fechas en el contexto de programación web.

💡Inicialización de fechas

La inicialización de fechas se refiere al proceso de crear un objeto de fecha en JavaScript. Existen varias formas de hacerlo, como sin argumentos para usar la fecha actual, con una serie de parámetros para especificar una fecha concreta, o a partir de milisegundos desde el 1 de enero de 1970. Es una parte fundamental para entender cómo se trabaja con fechas en JavaScript.

💡Comparación de fechas

La comparación de fechas implica determinar la relación temporal entre dos fechas en JavaScript. Se puede verificar si una fecha es anterior, posterior o igual a otra utilizando operadores de comparación. Esta función es esencial para tareas que requieren la evaluación del orden cronológico de eventos.

💡Milisegundos

Los milisegundos son una unidad de tiempo que representa la fracción mil de un segundo. En JavaScript, las fechas a menudo se representan y manipulan en términos de milisegundos desde una época estándar (el 1 de enero de 1970). Esta medida de tiempo es crucial para la precisión en la gestión de fechas y horas en el código.

💡Objeto Date

El objeto Date en JavaScript es un constructor global utilizado para crear objetos que representan un momento específico en el tiempo. Contiene métodos para obtener y设置不同的 partes de la fecha y hora, y para realizar operaciones con fechas y horas.

💡Formateo de fechas

El formato de fechas se refiere a cómo se presentan y se muestran las fechas en una forma legible para los usuarios. Incluye el uso de diferentes formatos y convenciones regionales para representar la fecha. El formateo es importante para garantizar que las fechas sean comprensibles para los usuarios en diferentes contextos culturales.

💡Métodos de fecha

Los métodos de fecha son funciones integradas en el objeto Date que permiten obtener información específica de una fecha o realizar operaciones con ella. Estos métodos son fundamentales para la manipulación y el cálculo de fechas en JavaScript.

💡Manipulación de fechas

La manipulación de fechas se refiere a la capacidad de crear, modificar y calcular diferentes partes de una fecha en JavaScript. Es una habilidad esencial para el desarrollo web, especialmente cuando se trata de tareas que requieren la consideración del tiempo, como la validación de fechas, el cálculo de diferencias de tiempo o la planificación de eventos.

💡Diferencias de fechas

Las diferencias de fechas se refieren a la cantidad de tiempo que hay entre dos fechas. En JavaScript, esto puede calcularse en términos de milisegundos, lo que permite realizar cálculos precisos sobre la duración de eventos o la diferencia entre fechas.

💡Idiomas y formatos de fecha

Los idiomas y formatos de fecha son las convenciones específicas que se utilizan para representar fechas en diferentes culturas y regiones. Los programadores deben tener en cuenta estas diferencias al desarrollar aplicaciones web globales, para que las fechas sean fácilmente comprensibles para los usuarios de todo el mundo.

💡Localización de fechas

La localización de fechas se refiere al proceso de adaptar la representación de fechas a las convenciones de un idioma o una región específica. Esto es importante para garantizar que las fechas sean legibles y comprensibles para los usuarios en diferentes partes del mundo.

Highlights

Se discuten las diferentes formas de trabajar con fechas en JavaScript.

Se menciona la importancia de entender cómo se definen las fechas en JavaScript.

Existen cuatro formas distintas de inicializar fechas en el lenguaje.

Se puede inicializar una fecha sin especificar ningún parámetro, utilizando 'new Date()'.

Las fechas se pueden definir con una estructura específica que incluye año, mes, día, hora, minutos, segundos y milisegundos.

El mes en las fechas JavaScript comienza en cero, donde 0 es enero y 11 es diciembre.

Se puede definir una fecha fija, estableciendo los parámetros correspondientes.

También se pueden inicializar fechas a través de milisegundos desde la época Unix.

Las fechas están formateadas en milisegundos desde el 1 de enero de 1970.

Se pueden definir milisegundos negativos, lo que implica restar milisegundos desde la época Unix.

Las fechas se pueden definir también a través de strings, como 'octubre 13, 1979'.

Se explica cómo comparar dos fechas para determinar si una es mayor, menor o igual que la otra.

Para comparar la igualdad entre fechas, es necesario convertirlas a milisegundos utilizando el método getTime.

Se describe cómo obtener el día, mes y año de una fecha utilizando los métodos getDate, getMonth y getFullYear.

El mes obtenido de una fecha en JavaScript necesita ser incrementado en uno debido a su inicio en cero.

Se menciona el método toLocaleDateString para mostrar una fecha en un formato de cadena localizado.

Diferentes localidades y idiomas pueden afectar la forma en que se muestran las fechas.

Se proporciona una URL para explorar diferentes formatos de fechas y localidades.

Transcripts

[Música]

Ok pues vamos a seguir con las fechas lo

que vamos a hacer va a ser guardar esto

como siempre

lo guardamos como objetos

punto js Vale y volvemos a abrir

un archivo con cuota

Ahí está

trabajando con fechas

sí que hemos visto el objeto fecha con

anterioridad pero vamos a hacer un

poquito más de hincapié en lo que son

las fechas vale ya sabemos que las

fechas se definen de esta manera

fecha Neo date sin más vale es una de

las formas de trabajar las fechas

existen cuatro formas diferentes de

hacer de inicializar fechas vale De esta

manera estamos inicializando la fecha de

ahora de hecho si yo ahora paso por

consola la fecha me está diciendo que

son la viernes 18:30 18 13 31 si hago un

enter Se está actualizando Porque en

cada momento está volviendo a evaluar y

volviendo a

inicializar esta fecha vale esto nos va

a volver un poco locos Pero bueno no

pasa nada

Esta es una forma de definir fechas Cómo

podemos inicializar fechas también

podemos inicializar fechas en base a la

fecha que queramos definir donde le

podemos decir New date y aquí le podemos

pasar diferentes

formas mira aquí tenemos la

chuleta vale el año

mes día hora minutos segundos

milisegundos aquí podemos decirle

1987 mes acordaros que el mes empieza

desde cero es decir que enero sería mes

0 vamos a ponerlo aquí

atención

los meses

inicializan en cero es decir 0 es enero

y 11 es diciembre vale si por ejemplo

vamos a poner un 10

Vale ahora con esto Solo ya podríamos

definir una fecha vale fijaros como aquí

cuando yo hago con el coma me aparece en

interrogante estos No me aparecen en

interrogante Porque estos son datos

obligatorios Si queremos definirlo de

esta manera estos dos parámetros son

obligatorios estos ya que tienen la

interrogación ya son opcionales si yo

aquí ya no le pongo nada me pondrá el 1

de este mes de este año

a las 0 minutos 0 horas 0 segundos

etcétera Vale entonces yo aquí puedo

seguir poniéndole información pero es

opcional así que si yo ahora paso por

pantalla

la fecha 2

ya me está diciendo que es domingo 1 de

noviembre

a las 12 de la noche 0 minutos 0

segundos vale

podemos definirlo Si queremos el día 20

ahí tenemos viernes 20 de noviembre

podemos decirle una hora

podemos decirle unos minutos vamos

decirle unos segundos

vale incluso unos milisegundos 192 me lo

invento vale

por qué porque las fechas están

formateadas en milisegundos están

formateadas en milisegundos a partir del

de la fecha inicial que la definieron en

1971 de enero de 1970 vale De hecho otra

de las formas de inicializar fechas

con fecha 3 sería a través de los

milisegundos si yo aquí le pasó un cero

vamos a ver dónde está esto valió

no String number date vale si yo le paso

un número

vamos a ver qué es lo que nos devuelve

efectivamente nos devuelve el jueves 1

de enero de 1970 que es a partir del

cual a las 0 vale porque esto lo está

cogiendo en mi en mi hora entonces a las

más 0 serían las 00 Vale entonces si yo

le pongo un millón de milisegundos ahí

estamos en un millón Sería bueno claro

el 1 de enero a la una y 16 vale si yo

le pongo mil millones

ya nos daría el 12 de enero si yo le

pongo

10.000 millones nos daría el 26 de abril

si yo le pongo 100.000 millones

1973 si me pongo más vale estos son los

milisegundos Okay de la misma manera

podemos definir milisegundos negativos

por lo tanto está restando milisegundos

al 1 de enero de 1970 lo cual esto nos

da 1938 como un cero más nos daría 1653

etcétera etcétera vale

De esta manera también podemos definir a

través de los milisegundos

Y por último podríamos definir las

fechas

a través de strings

que por ejemplo tengo aquí una chuleta

podemos decirle

october 13

1979 vamos a ver que no se vuelve esto

fecha 4 y ahí lo tenemos vale Y aquí le

podríamos pasar incluso la hora a las 12

y 15 con 15 segundos vale Ahí lo vemos

Perfecto esto serían las cuatro formas

de definir nuestras fechas Entonces cómo

podríamos ahora comparar dos fechas si

una Es mayor que la otra o son iguales

vale lo que podemos hacer con el objeto

de tipo fecha es comparar si una fecha

es posterior a otra Cómo podemos hacer

eso pues muy sencillo Supongo que te lo

habrás imaginado pero con el operador

mayor que menor que por ejemplo vamos a

fecha

veamos si hoy es posterior a fecha 2 por

ejemplo

y nos devuelve un true vale porque hoy

es mayor o más tarde en el tiempo si yo

le pongo a ver si es menor vamos a

quitar esto si me pongo a ver si es

menor me pone un falso en cambio

si yo

yo defino fecha 2 y copio

esta fecha 2 y le asigno fecha 5

esto lo voy a subir por aquí para que

quede ordenado

yo ahora técnicamente fecha 2 y fecha 5

son iguales vale

Pero qué pasará si yo miro la igualdad

entre ellas

fecha 2 Igual igual a fecha 5

vale igual es que tendré que quitarle

algo igual no

vale Esto está mal es un error

no se pueden comparar fechas de esta

manera si queremos compararlas

tendríamos que convertirlas a

milisegundos de esta manera podríamos

hacer lo siguiente

con sol log y Aquí vamos a obtener los

milisegundos a partir de una fecha para

ello vamos a utilizar el método get time

por eso fecha 2 punto get Time aquí ya

lo vemos que me lo está convirtiendo a

milisegundos entonces aquí vamos a

comparar a ver si es igual a fecha 5.

get Time

en este caso sí

Ok

Esta es la forma de comparar la igualdad

entre fechas vale importante esto

tenemos que tenerlo en cuenta vale Y por

último

Cómo podemos obtener

el día

el mes y el año de una fecha esto ya lo

vimos en alguna sesión anterior pero me

gustaría hacer hincapié en ello porque

se suele utilizar si trabajáis en algún

proyecto grande seguro que Vais a tener

que utilizar esto así que es mejor que

lo vayáis aprendiendo con sol log para

obtener el día

tenemos el método

get date vale obtener la fecha

técnicamente sería obtener la fecha Pero

de esta manera estamos obteniendo el día

Entonces vamos a utilizar el fecha 2 que

ya lo conocemos

get tate y ya vemos que nos está

obteniendo el día 20 vale Si queremos

obtener el mes acordaros que en

javascript el mes es un poco triqui es

un poco

es un poco con contraintuitivo porque

enero es cero y diciembre es 11 vale

vamos a recordarlo aquí

por tanto tendríamos que sumarle uno con

sol log fecha 2

ya vemos cómo nos devuelve un 10 Aunque

sería en noviembre Pues aquí

directamente tendríamos que sumarle uno

ok

vale Y por último vamos a obtener

el año para ello tenemos el get full

Gear

vale muy sencillo con son log fecha

2.get full Gear vale De esta manera

estamos obteniendo 1987 que es tal y

como lo hemos definido aquí en el 2 pero

que es lo mismo vale

Y por último un pequeño truquito que si

trabajáis con Front lo Vais a necesitar

Cómo podemos mostrar una fecha en un

String podríamos hacerlo de la siguiente

manera punto lo fecha 2

Friday November Twenty 1987 etcétera

etcétera Pero esta manera es un poco

poco legible para ello vamos a utilizar

un método que yo utilizo muchísimo que

es el punto tu local

date String vale Cómo se utiliza pues

muy sencillo con sol log

estoy utilizando el consolock para

pasarlo por pantalla nosotros podéis

hacer lo que queráis con él vale tu

locales date String vale Y aquí le

tenemos que pasar el local vale el local

sería como el lenguaje o el idioma Mejor

dicho entonces para ello voy a dejarlos

aquí una url

que la he estado mirando y que está muy

bien entonces aquí la tengo vale para

que le echéis un vistazo y de hecho

vamos a entrar

vale

fijaros como los locales o los idiomas

que utilizamos pueden ser Estados Unidos

en Gran Bretaña Corea

Irán me imagino Egipto

vale dos persas japonés etcétera

etcétera entonces podemos utilizar

alguno de ellos a mí me gusta utilizar

este que es como lo utilizo yo Vale

entonces podéis echar un vistazo ahí a

los tipos de idiomas Que hay y los

formatos en los que los está pasando si

yo por ejemplo ahora volvemos a

trabajando con fechas

y me pegó esto aquí

nos aparece aquí en cambio Si yo pongo

en Estados Unidos en Estados Unidos nos

muestran el mes antes es mes día año

pero eso ya depende de

donde queráis Mostrar esta fecha vale

Así que esto lo voy a guardar en un

archivo nuevo que se llaman fechas y

vamos a dejar este vídeo por aquí vale

Así que nos vemos en el siguiente vídeo

hasta