11 - Dates

Trabajando con fechas en JS

Índice
 Dates

 UCT y GMT
 Unix Time
 Creando un objeto fecha
 Propiedades y métodos

 Prácticas

ALBERT BASSONS 2
GMT

• La hora GMT (Greenwich Mean

Time) se basa en la posición
media del Sol.

• Fue definida por primera vez a

partir del mediodía de Greenwich,
pero el 1 de enero de 1925 se
determinó de que la jornada
comenzase a la media noche,
atrasando aquel día 12 horas.

ALBERT BASSONS 3
GMT

• Desde entonces el GMT se sigue

definiendo a partir de la medianoche
de Greenwich. Esta hora carece de
cierta fiabilidad ya que se basa en el
movimiento medio del Sol.

• Fue por esto por lo que se definió la

hora UTC, que tiene una gran
precisión.

ALBERT BASSONS 4
UTC
• El tiempo UTC (Coordinated Universal
Time) se obtiene a partir del Tiempo
Atómico Internacional, un estándar de
tiempo calculado a partir de una media
de las señales de los relojes atómicos
de 70 laboratorios de todo el mundo.

• Debido a que la rotación de la Tierra es

estable pero no constante y se retrasa
con respecto al tiempo atómico, se
añade o quita un segundo intercalar
tanto a finales de junio como de
diciembre.

ALBERT BASSONS 5
Unix Time
• El tiempo Unix, (POSIX time o Epoch time)
define el tiempo como el número de
segundos que han pasado desde las
00:00:00 del 1 de enero de 1970 respecto
al sistema UTC.

• No se tienen en cuenta los segundos

intercalares, con lo que la predicción de
fechas tiene algunos problemas.

• Se usa extensamente en sistemas

informáticos (bases de datos, sistemas
operativos, ficheros…).

ALBERT BASSONS 6
Date
• En muchas situaciones, nos puede interesar
trabajar con fechas y horas desde scripts en
JavaScript.

• Al igual que para las cadenas de texto o los

vectores, se pueden crear objetos de tipo
fecha y trabajar ellos.

• Esto se hace con objetos de tipo Date y sus

propiedades y métodos nos permitirán
manipular fechas de forma sencilla.

ALBERT BASSONS 7
Crear un objeto Date
• Los objetos Date representan fechas y horas y se construyen
mediante el constructor Date().

• Existen cuatro formas de construir e inicializar una fecha:

var d = new Date();

var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(y, m, d, h, m, s, millis);

• Hay que tener cuidado, puesto que cuando tengamos que

introducir el mes, debemos poner un valor de 0 a 11 en lugar
de 1 a 12.

ALBERT BASSONS 8
Ejemplo 1

ALBERT BASSONS 9
Ejemplo 2

ALBERT BASSONS 10
Ejemplos 3 y 4

ALBERT BASSONS 11
Fecha incorrecta
• Si creamos un objeto Date a partir
de una fecha incorrecta, lo que
sucederá es que no se
corresponderá con la fecha
deseada, por ejemplo el 29 de
febrero es el 1 de marzo.

• Esto se debe a que realmente se

realiza un cálculo matemático con
los milisegundos.

ALBERT BASSONS 12
Ejemplo

ALBERT BASSONS 13
Fecha incorrecta
• Las soluciones pasan por validar la fecha antes de construir el
objeto Date:

• Con una expresión regular. Lo ideal es mediante la expresión

compleja que valida incluso el 29 de febrero en años bisiestos
(transparencias de validación de formularios).

• Tomar los valores de entrada y comprobar que son

coherentes (el día del mes se corresponde y los años
bisiestos son múltiplos de 4).

ALBERT BASSONS 14
Objetos Date
• De nuevo, las fechas son objetos y tienen propiedades y
métodos.

• Una vez creado el objeto Date, podremos manipularlo mediante

sus métodos. La mayoría permiten cambiar año, mes, día…
utilizando GMT o UTC. Todas las fechas son calculadas en
milisegundos desde el 1 de enero de 1970. Un día contiene
86.400.000 milisegundos.

Propiedad Descripción
constructor Retorna la función que creó el prototipo del objeto
prototype Permite añadir propiedades y métodos al objeto

ALBERT BASSONS 15
Métodos
Método Descripción
getDate() Retorna el día del mes (1 a 31)
getDay() Retorna el día de la semana (0 a 6)
getFullYear() Retorna el año con cuatro dígitos
getHours() Retorna la hora (0 a 23)
getMilliseconds() Retorna los milisegundos (0 a 999)
getMinutes() Retorna los minutos (0 a 59)
getMonth() Retorna el mes (0 a 11)
getSeconds() Retorna los segundos (0 a 59)
getTime() Retorna el número de milisegundos desde el 1/1/1970

ALBERT BASSONS 16
Ejemplo

ALBERT BASSONS 17
Métodos
Método Descripción
getTimezoneOffset() Retorna la diferencia entre el tiempo UTC y la hora local, en
minutos.
getUTCDate() Retorna el día del mes UTC (de 1 a 31)
getUTCDay() Retorna el día de la semana UTC (de 0a 6)
getUTCFullYear() Retorna el año UTC (cuatro dígitos)
getUTCHours() Retorna la hora UTC (0 a 23)
getUTCMilliseconds() Retorna los milisegundos UTC (0 a 999)
getUTCMinutes() Retorna los minutos UTC (0 a 59)
getUTCMonth() Retorna el mes UTC (0 a 11)
getUTCSeconds() Retorna los segundos UTC (0 a 59)

ALBERT BASSONS 18
Métodos
Método Descripción
parse() Parsea una fecha en texto y retorna el número de milisegundos
desde el 1/1/1970.
setDate() Establece el día del mes de un objeto fecha
setFullYear() Establece el año de un objeto fecha
setHours() Establece la hora de un objeto fecha
setMilliseconds() Establece los milisegundos de un objeto fecha
setMinutes() Establece los minutos de un objeto fecha
setMonth() Establece el mes de un objeto fecha
setSeconds() Establece los segundos de un objeto fecha

ALBERT BASSONS 19
Ejemplo

ALBERT BASSONS 20
Métodos
Método Descripción
setTime() Establece fecha y hora añadiendo o restando un número
específico de milisegundos desde el 1/1/1970
setUTCDate() Establece el día del mes de un objeto fecha acorde a UTC
setUTCFullYear() Establece el año de un objeto fecha acorde a UTC
setUTCHours() Establece la hora de un objeto fecha acorde a UTC
setUTCMilliseconds() Establece los milisegundos de un objeto fecha acorde a UTC
setUTCMinutes() Establece los minutos de un objeto fecha acorde a UTC
setUTCMonth() Establece el mes de un objeto fecha acorde a UTC
setUTCSeconds() Establece los segundos de un objeto fecha acorde a UTC

ALBERT BASSONS 21
Métodos
Método Descripción
toDateString() Convierte la fecha a cadena de texto
toISOString() Retorna la fecha como String, usando el estándar
toJSON() Retorna la fecha como String, formateada como fecha Json
toLocaleDateString() Retorna la fecha como cadena de texto usando convenios locales
toLocaleTimeString() Retorna la hora como cadena de texto, usando convenios locales
toLocaleString() Convierte todo el objeto a string, usando convenios locales
toString() Convierte el objeto en cadena de texto
toTimeString() Convierte la hora a cadena de texto

ALBERT BASSONS 22
Métodos
Método Descripción
toUTCString() Convierte el objeto a cadena de texto, acorde a UTC
UTC() Retorna el número de milisegundos en una fecha desde las 0:00:00
del 1/1/1970 acorde a UTC
valueOf() Retorna el valor primitivo del objeto Date

ALBERT BASSONS 23
Comparando fechas
• Se pueden comparar fechas fácilmente:

ALBERT BASSONS 24
Ejemplo: cuenta atrás (1 de 2)

ALBERT BASSONS 25
Ejemplo: cuenta atrás (2 de 2)

ALBERT BASSONS 26
 Ejercicios
Ejercicios de fechas
Ejercicios
1. Prueba al menos seis métodos de los que se mencionan en las
transparencias que hablan de los métodos disponibles para
trabajar con fechas (las tablas lila).

Prueba también a construir fechas usando los cuatro

constructores mencionados.

Asegúrate que entiendes cómo funciona.

ALBERT BASSONS 28
Ejercicios
2. Crea una página que nos pida una fecha de nacimiento. Tras
introducirla y apretar un botón, nos dirá exactamente la edad que
tenemos en años.

3. Crea una página que nos pida una fecha de nacimiento. Tras
introducirla y apretar un botón, nos indicará cuántos días quedan
para nuestro cumpleaños (en meses y días).

Si el día coincide con la fecha de hoy, aparecerá una imagen

deseándonos feliz cumpleaños.

ALBERT BASSONS 29
Ejercicios
4. Crea una página que nos pida
una fecha y una hora mediante
inputs (puedes utilizar los tipos de
campo que quieras, pero deberás
asegurarte que funcionen en
todos los navegadores).

Al presionar un botón, se iniciará

una cuenta atrás desde el
momento actual hasta la fecha y
hora indicada (debes utilizar
setInterval o setTimeout).

ALBERT BASSONS 30