Bienvenido a nuestra guía definitiva sobre el Dateobjeto JavaScript y Moment.js. Este tutorial le enseñará todo lo que necesita saber sobre cómo trabajar con fechas y horas en sus proyectos.
Cómo crear un Dateobjeto
Obtener la fecha y hora actual
const now = new Date(); // Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)Obtenga una fecha y hora con valores individuales
const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)La sintaxis es Date(year, month, day, hour, minute, second, millisecond).
Tenga en cuenta que los meses están indexados a cero, comenzando con enero en 0 y terminando con diciembre en 11.
Obtener una fecha y hora a partir de una marca de tiempo
const unixEpoch = new Date(0);Esto representa la hora del jueves 1 de enero de 1970 (UTC) o la hora de Unix Epoch. La época de Unix es importante porque es lo que JavaScript, Python, PHP y otros lenguajes y sistemas utilizan internamente para calcular la hora actual.
new Date(ms) devuelve la fecha de la época más la cantidad de milisegundos que ingresa. En un día hay 86,400,000 milisegundos, así que:
const dayAfterEpoch = new Date(86400000);volverá el viernes 2 de enero de 1970 (UTC).
Obtener una fecha y hora de una cadena
const stringDate = new Date('May 29, 2019 15:00:00'); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)Obtener la fecha de esta manera es muy flexible. Todos los ejemplos siguientes devuelven Dateobjetos válidos :
new Date('2019-06') // June 1st, 2019 00:00:00 new Date('2019-06-16') // June 16th, 2019 new Date('2019') // January 1st, 2019 00:00:00 new Date('JUNE 16, 2019') new Date('6/23/2019')También puede usar el Date.parse()método para devolver el número de milisegundos desde la época (1 de enero de 1970):
Date.parse('1970-01-02') // 86400000 Date.parse('6/16/2019') // 1560610800000Establecer una zona horaria
Cuando se pasa una cadena de fecha sin establecer una zona horaria, JavaScript asume que la fecha / hora están en UTC antes de convertirla a la zona horaria de su navegador:
const exactBirthdate = new Date('6/13/2018 06:27:00'); console.log(exactBirthdate) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)Esto puede dar lugar a errores en los que la fecha devuelta esté retrasada en muchas horas. Para evitar esto, pase una zona horaria junto con la cadena:
const exactBirthdate = new Date('6/13/2018 06:27:00 GMT-1000'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time) /* These formats also work: new Date('6/13/2018 06:27:00 GMT-10:00'); new Date('6/13/2018 06:27:00 -1000'); new Date('6/13/2018 06:27:00 -10:00'); */También puede pasar algunos, pero no todos, los códigos de zona horaria:
const exactBirthdate = new Date('6/13/2018 06:27:00 PDT'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)Date Métodos de objetos
A menudo, no necesitará la fecha completa, sino solo una parte, como el día, la semana o el mes. Afortunadamente, existen varios métodos para hacerlo:
const birthday = new Date('6/13/2018 06:27:39'); birthday.getMonth() // 5 (0 is January) birthday.getDate() // 13 birthday.getDay() // 3 (0 is Sunday) birthday.getFullYear() // 2018 birthday.getTime() // 1528838859000 (milliseconds since the Unix Epoch) birthday.getHours() // 6 birthday.getMinutes() // 27 birthday.getSeconds() // 39 birthday.getTimezoneOffset() // -540 (time zone offset in minutes based on your browser's location)Facilite el trabajo con fechas con Moment.js
Obtener fechas y horas correctas no es una tarea fácil. Cada país parece tener una forma diferente de formatear las fechas, y tener en cuenta las diferentes zonas horarias y el horario de verano / verano lleva, bueno, mucho tiempo. Ahí es donde brilla Moment.js: hace que analizar, formatear y mostrar fechas sea muy sencillo.
Para comenzar a usar Moment.js, instálelo a través de un administrador de paquetes como npm, o agréguelo a su sitio a través de un CDN. Consulte la documentación de Moment.js para obtener más detalles.
Obtenga la fecha y hora actual con Moment.js
const now = moment();Esto devuelve un objeto con la fecha y la hora según la ubicación de su navegador, junto con otra información regional. Es similar al JavaScript nativo new Date().
Obtenga una fecha y hora de una marca de tiempo con Moment.js
De manera similar a new Date(ms), puede pasar el número de milisegundos desde la época a moment():
const dayAfterEpoch = moment(86400000);Si desea obtener una fecha usando una marca de tiempo de Unix en segundos, puede usar el unix()método:
const dayAfterEpoch = moment.unix(86400);Obtenga una fecha y hora de una cadena con Moment.js
Analizar una fecha de una cadena con Moment.js es fácil, y la biblioteca acepta cadenas en el formato de fecha y hora ISO 8601 o RFC 2822, junto con cualquier cadena aceptada por el Dateobjeto JavaScript .
Se recomiendan cadenas ISO 8601 ya que es un formato ampliamente aceptado. Aquí hay unos ejemplos:
moment('2019-04-21'); moment('2019-04-21T05:30'); moment('2019-04-21 05:30'); moment('20190421'); moment('20190421T0530');Establecer una zona horaria con Moment.js
Up until now, we have been using Moment.js in local mode, meaning that any input is assumed to be a local date or time. This is similar to how the native JavaScript Date object works:
const exactBirthMoment = moment('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)However, to set a time zone, you must first get the Moment object in UTC mode:
const exactBirthMoment = moment.utc('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)Then you can adjust for the difference in time zones with the utcOffset() method:
const exactBirthMoment = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)You can also set the UTC offset as a number or a string:
moment.utc().utcOffset(10) // Number of hours offset moment.utc().utcOffset(600) // Number of minutes offset moment.utc().utcOffset('+10:00') // Number of hours offset as a stringTo use named time zones (America/Los_Angeles) or time zone codes (PDT) with Moment objects, check out the Moment Timezone library.
Format the date and time with Moment.js
One of the major strengths that Moment.js has over native JavaScript Date objects is how easy it is to format the output date and time. Just chain the format() method to a Moment date object and pass it a format string as a parameter:
moment().format('MM-DD-YY'); // "08-13-19" moment().format('MM-DD-YYYY'); // "08-13-2019" moment().format('MM/DD/YYYY'); // "08/13/2019" moment().format('MMM Do, YYYY') // "Aug 13th, 2019" moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20" moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"Here's a table with some common formatting tokens:
| Input | Output | Description |
|---|---|---|
| YYYY | 2019 | 4 digit year |
| YY | 19 | 2 digit year |
| MMMM | August | Full month name |
| MMM | Aug | Abbreviated month name |
| MM | 08 | 2 digit month |
| M | 8 | 1 digit month |
| DDD | 225 | Day of the year |
| DD | 13 | Day of the month |
| Do | 13th | Day of the month with ordinal |
| dddd | Wednesday | Full day name |
| ddd | Wed | Abbreviated day name |
| HH | 17 | Hours in 24 hour time |
| hh | 05 | Hours in 12 hour time |
| mm | 32 | Minutes |
| ss | 19 | Seconds |
| a | am / pm | Ante or post meridiem |
| A | AM / PM | Capitalized ante or post meridiem |
| ZZ | +0900 | Timezone offset from UTC |
| X | 1410715640.579 | Unix timestamp in seconds |
| XX | 1410715640579 | Unix timestamp in milliseconds |
See the Moment.js docs for more formatting tokens.
Working with JavaScript Date objects and Moment.js doesn't have to be time consuming. Now you should know more than enough to get started with both.