Introducción
La fecha y la hora no solo son componentes críticos de la vida cotidiana, sino también parte de la programación informática. Ya sea que las necesite para reservar citas o mostrar un calendario, existen muchas razones por las que requeriría una fecha y hora. Las aplicaciones de las funciones de fecha y hora son extensas y extremadamente versátiles. La versatilidad proviene del hecho de que se puede configurar la hora y la fecha según el usuario. Cada usuario en una ubicación geográfica diferente obtendrá un resultado diferente según su zona horaria. Estas funciones se utilizan para sitios web con interfaces de citas y sistemas de reserva como restaurantes.
Los programadores suelen utilizar JavaScript para añadir las funciones de fecha y hora a su sitio web. Esto se debe a que JavaScript ya tiene una función integrada para estos aspectos. En este tutorial, nosotros exploraremos el Date objeto en mayor detalle. Hablaremos sobre los métodos que puede utilizar para configurar los ajustes ideales para la fecha y la hora en su sitio web. También cubriremos cómo puede cambiar el formato y más.
¿Qué es el objeto Date?
Como acabamos de mencionar, JavaScript tiene una función integrada para la fecha y la hora. Se llama el Date objeto. Este objeto le permite cambiar y gestionar los datos asociados para la fecha y la hora. Cuando crea una instancia para el Date, se crea un nuevo objeto. Este objeto corresponde a la configuración de fecha y hora de su ordenador en ese momento.
Para comprender mejor el funcionamiento de este objeto, consideremos un ejemplo. Primero crearemos una variable. Luego le asignaremos una fecha determinada. Supongamos que el día es miércoles y la fecha es el 18 de octubre en la zona horaria de Londres (GMT). Eche un vistazo a esta configuración:
|
1 2 3 4 |
// Establecer la variable en la fecha y hora actuales const now = new Date(); // Ver la salida Now; |
|
1 2 3 |
Salida Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Nuestra salida muestra una cadena de fecha. Consta de los siguientes datos:
| Día de la semana | Mes | Día | Año | Hora | Minuto | Segundo | Zona horaria |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript recibe los datos a través de una marca de tiempo. Esta marca de tiempo proviene de la hora Unix. Este es un valor que muestra la cantidad de milisegundos transcurridos desde el 1 de enero de 1970 a la medianoche. Para el usuario, la fecha aparece en un formato comprensible. Si desea obtener esta marca de tiempo, debe utilizar el método getTime() de esta manera:
|
1 2 3 |
// Obtener la marca de tiempo actual now.getTime(); |
|
1 2 3 |
Salida 1508330494000 |
Aunque este valor parece confuso, representa lo mismo que la cadena de fecha. Es simplemente el 18 de octubre de 2017.
¿Qué es el tiempo de época?
El siguiente concepto a aprender es el tiempo de época. También se le llama tiempo cero. Puede entenderlo mejor como la cadena de datos
01 Enero, 1970 00:00:00 Universal Tiempo (UTC) y la 0 marca de tiempo. Para probarlo, cree una nueva variable. Luego asígnela a una nueva
Date instancia en una 0 marca de tiempo:
|
1 2 3 4 5 |
// Asignar la marca de tiempo 0 a una nueva variable const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Salida 01 Enero, 1970 00:00:00 Universal Tiempo (UTC) |
El tiempo de época solía ser el estándar para los programadores. También es el método que utiliza JavaScript para medir el tiempo.
Formatos para la creación de fechas en JavaScript
Ahora que sabemos cómo crear una nueva instancia Date con una cadena y una marca de tiempo, podemos hablar de los diferentes formatos. Hay cuatro formatos que se detallan a continuación:
Esto significa que es posible que mencione fechas y horas específicas según sea necesario. También puede simplemente usar una cadena de datos o una marca de tiempo como discutimos antes. Para su comprensión, observaremos cómo crear nuevos objetos Date de tres maneras diferentes. Suponiendo que nuestra fecha y hora es el 4 de julio de 1776 a las 12:30 pm GMT:
|
1 2 3 4 5 6 7 8 |
// Método de marca de tiempo new Date(-6106015800000); // Método de cadena de fecha new Date("4 de julio de 1776 12:30"); // Método de fecha y hora new Date(1776, 6, 4, 12, 30, 0, 0); |
Como puedes ver, los tres métodos dan la misma fecha como resultado. Una diferencia es que si estás usando una hora anterior a la época (Epoch), la marca de tiempo se mostrará con un número negativo. Además, los segundos y milisegundos son 0 por defecto en el método de fecha y hora. Si olvidas ingresar un número, también se establecerá en 0 por defecto.
Otro aspecto confuso es que julio está representado por el 6 en lugar del 7. Esto se debe a que la numeración comienza con 0. Ten en cuenta estas cosas cuando estés creando las instancias.
Uso del comando get para recuperar la fecha
Ahora que la fecha está establecida, veamos cómo puedes acceder a sus componentes. Una forma es usar el comando get . Esta tabla muestra todos los métodos get para el objeto Date :
En este ejemplo, asignaremos una nueva fecha a una nueva variable, 31 de julio de 1980:
|
1 2 |
// Inicializar una nueva instancia de cumpleaños const birthday = new Date(1980, 6, 31); |
Así es como se vería si obtuvieras todos los componentes individuales de la fecha usando este método:
|
1 2 3 4 5 6 7 8 9 |
birthday.getFullYear(); // 1980 birthday.getMonth(); // 6 birthday.getDate(); // 31 birthday.getDay(); // 4 birthday.getHours(); // 0 birthday.getMinutes(); // 0 birthday.getSeconds(); // 0 birthday.getMilliseconds(); // 0 birthday.getTime(); // 333849600000 (para GMT) |
En algunas situaciones, es posible que solo necesites una parte determinada de la fecha. Puedes usar estos métodos para hacerlo. Así es como puedes probar para confirmar si es 3 de octubre:
|
1 2 3 4 5 6 7 8 |
// Obtener la fecha de hoy const today = new Date(); // Comparar hoy con el 3 de octubre if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Es 3 de octubre."); } else { console.log("No es 3 de octubre."); } |
|
1 2 3 |
Salida No'es 3 de octubre. |
Esa es la salida que obtendrías si la fecha no fuera el 3 de octubre y realizaras la prueba.
Uso del comando set para modificar la fecha
De manera similar a los comandos get , tienes las contrapartes del comando set . Este comando te permite modificar los componentes de la fecha. Esta tabla muestra todos los métodos:
Digamos que queremos cambiar la variable birthday de 1997 a 1980:
|
1 2 3 |
// Cambiar el año de la fecha de cumpleaños birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Salida Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Ahora nuestra salida muestra el nuevo año. De manera similar, también puedes modificar otros componentes de la fecha.
Métodos de fecha UTC en JavaScript
Si extraes los componentes de la fecha utilizando el método get , los recibirás según la configuración del sistema local de la zona horaria del usuario. Alternativamente, puedes configurarlo para calcular la hora según el estándar UTC. UTC significa Tiempo Universal Coordinado. Puedes hacer esto usando el método getUTC . Esta tabla muestra todos los métodos UTC para el objeto Date en JavaScript:
Como puedes ver, todos los métodos son similares a los comandos get . Sin embargo, las salidas serían diferentes. Puedes probar la diferencia con este código:
|
1 2 3 4 5 6 |
// Asignar la hora actual a una variable const now = new Date(); // Imprimir las zonas horarias local y UTC console.log(now.getHours()); console.log(now.getUTCHours()); |
Este código te mostrará la hora actual, así como la hora en la zona horaria UTC. Los números serán los mismos si ya te encuentras en la zona horaria UTC. La razón por la que usarías UTC es que permite la coherencia entre zonas y regiones internacionales.
Conclusión
Hemos cubierto los diversos métodos para el objeto Date en este tutorial. Esto incluyó cómo recuperar los componentes de la fecha con get y cómo modificarlos con set. También exploramos las zonas horarias UTC y cómo usarlas en JavaScript.
En última instancia, JavaScript tiene un montón de funciones integradas para fecha y hora. Esto hace que la programación de sitios web complejos sea bastante sencilla. Puedes leer más sobre las funciones de fecha y hora de JavaScript en Mozilla Developer Network. Sin embargo, este tutorial debería ayudarte a cubrir los conceptos básicos con respecto a los fundamentos.
Aquí hay más recursos de nuestro blog que facilitarán la programación con JavaScript:
- JavaScript: un tutorial sobre cómo indexar, dividir y manipular cadenas
- Trabajar con JavaScript: cómo funcionan los prototipos y las herencias
- Una guía sobre cómo agregar JavaScript a HTML
- Una descripción general del formato de intercambio de datos JSON
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.