{"id":26565,"date":"2024-02-18T19:07:10","date_gmt":"2024-02-18T18:07:10","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/maneja-fechas-y-horas-con-facilidad-en-javascript-usando-day-js\/"},"modified":"2024-06-03T17:41:47","modified_gmt":"2024-06-03T16:41:47","slug":"maneja-fechas-y-horas-con-facilidad-en-javascript-usando-day-js","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/","title":{"rendered":"Manage Dates and Times with Ease in JavaScript Using Day.js"},"content":{"rendered":"<p>Managing dates and times in web application development has always been a challenge. However, one of the most practical and lightweight libraries that have simplified this task is Day.js. This tool has quickly become an ally for developers thanks to its simplicity and its similarity to the well-known Moment.js library. With Day.js, you can parse, validate, manipulate, and display dates\/times in JavaScript at a fraction of the size of other libraries.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#%C2%BFQue_es_Dayjs\" >What is Day.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Instalacion_de_Dayjs\" >Installing Day.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Trabajando_con_Dayjs\" >Working with Day.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Obtener_la_Fecha_Actual\" >Get Current Date<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Formateando_Fechas\" >Formatting Dates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Parseando_Fechas\" >Parsing Dates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Operaciones_con_Fechas\" >Operations with Dates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Trabajando_con_Zonas_Horarias\" >Working with Time Zones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Internacionalizacion\" >Internationalization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Diferencia_entre_Fechas\" >Difference between Dates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Consultas_y_Manipulacion\" >Consultations and Manipulation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Casos_de_Uso_Practicos_y_Consejos\" >Practical Use Cases and Tips<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Gestiona_Fechas_en_Proyectos_Web\" >Manage Dates in Web Projects<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Inclusion_de_Dayjs_en_Frameworks\" >Inclusion of Day.js in Frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nelkodev.com\/en\/blog\/handle-dates-and-times-with-ease-in-javascript-using-day-js\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Dayjs\"><\/span>What is Day.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Day.js is a minimal JavaScript library that allows us to work with dates in a very intuitive and efficient way. It is immutable, meaning that every operation you perform on a date produces a new instance of Day.js to prevent unwanted changes to the original dates. Additionally, Day.js follows the ISO 8601 format string standard, making it easier to handle dates in international environments.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Instalacion_de_Dayjs\"><\/span>Installing Day.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started with Day.js, we first need to install it. You can use npm or yarn to include it in your project as follows:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install dayjs<\/code><\/pre>\n<p>o<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">yarn add dayjs<\/code><\/pre>\n<p>Once installed, you can start using Day.js by importing it into your JavaScript file:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const dayjs = require(&#039;dayjs&#039;);<\/code><\/pre>\n<p>Or, if you are using ES6 modules:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import dayjs from &#039;dayjs&#039;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Trabajando_con_Dayjs\"><\/span>Working with Day.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Obtener_la_Fecha_Actual\"><\/span>Get Current Date<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Let&#039;s start with the basics: getting the current date and time. It&#039;s as simple as calling <code>dayjs()<\/code> no arguments.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let now = dayjs(); console.log(now.toString()); \/\/ will display the current date and time in ISO 8601 format<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Formateando_Fechas\"><\/span>Formatting Dates<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the most common needs is to display dates in a specific format. Day.js simplifies this with its method <code>.format()<\/code>.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let nowFormat = now.format(&#039;YYYY-MM-DD HH:mm:ss&#039;); console.log(nowFormat); \/\/ Example output: &quot;2023-03-22 15:45:32&quot;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Parseando_Fechas\"><\/span>Parsing Dates<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Day.js can transform a text string into a date object using date string parsing.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let birthday = dayjs(&#039;1990-05-12&#039;); console.log(birthday.format(&#039;DD\/MM\/YYYY&#039;)); \/\/ Output: &quot;05\/12\/1990&quot;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Operaciones_con_Fechas\"><\/span>Operations with Dates<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the great advantages of Day.js is the ability to perform operations with dates, such as adding, subtracting, or comparing.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let oneWeekLater = now.add(1, &#039;week&#039;); console.log(oneWeekLater.format()); let oneWeekBefore = now.subtract(1, &#039;week&#039;); console.log(oneWeekBefore.format()); console.log(now.isBefore(oneWeekLater)); \/\/ true console.log(now.isAfter(oneWeekBefore)); \/\/ true<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Trabajando_con_Zonas_Horarias\"><\/span>Working with Time Zones<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Day.js has a plugin to manage time zones called <code>utc<\/code>. To use it, you need to install it and then import it.<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install dayjs-plugin-utc<\/code><\/pre>\n<pre><code class=\"&quot;language-javascript&quot;\">const dayjs = require(&#039;dayjs&#039;); const utc = require(&#039;dayjs\/plugin\/utc&#039;); dayjs.extend(utc); let UTCTime = dayjs().utc(); console.log(timeUtc.format()); \/\/ Time in UTC format<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Internacionalizacion\"><\/span>Internationalization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you are creating an application that will be used in different languages, Day.js offers a very convenient solution for internationalization. With the use of plugins, you can offer date formats that fit the user&#039;s locale.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Diferencia_entre_Fechas\"><\/span>Difference between Dates<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To know the difference in time measurement between two dates, Day.js offers the function <code>diff<\/code>.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let start = dayjs(&#039;2023-03-01&#039;); let end = dayjs(&#039;2023-03-22&#039;); let difference = end.diff(start, &#039;days&#039;); \/\/ The difference in days console.log(difference); \/\/ twenty-one<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Consultas_y_Manipulacion\"><\/span>Consultations and Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With Day.js, you can query different aspects of a date and also manipulate them.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let month = now.month(); \/\/ January is 0, February is 1, etc. console.log(`We are in the month: ${month + 1}`); now.set(&#039;month&#039;, 5); \/\/ Change to the month of June console.log(now.toString()); <\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Casos_de_Uso_Practicos_y_Consejos\"><\/span>Practical Use Cases and Tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Gestiona_Fechas_en_Proyectos_Web\"><\/span>Manage Dates in Web Projects<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whether you&#039;re working on a blog, an e-commerce platform, or any other type of web project, managing dates is essential. From showing the publication date of a post to calculating delivery times, Day.js will be your tool for all this and more. To give added value to your posts, manage publication dates with friendly formats such as &quot;An hour ago&quot; or &quot;Two days ago&quot;, which you can do with Day.js functions to calculate the time difference and format it accordingly. a user-readable manner.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Inclusion_de_Dayjs_en_Frameworks\"><\/span>Inclusion of Day.js in Frameworks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The use of Day.js is not restricted to pure JavaScript projects. If you are working with frameworks like React, Vue or Angular, you can integrate Day.js without problems.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Handling dates and times is essential in virtually any modern web application. Day.js offers an easy and efficient solution for all date-related needs, without the overhead of larger libraries like Moment.js. Its immutable nature and extensive documentation make it easy to use even for the least experienced developers.<\/p>\n<p>If you want to know more about how to implement Day.js in your projects or have any questions, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev<\/a>. There you will find a space to connect and share experiences with other developers.<\/p>\n<p>Remember that managing dates doesn&#039;t have to be complicated. With tools like Day.js, you&#039;re just a few commands away from having complete control over timing in your apps. Integrate it today and make it easier to manage dates and times in your developments!<\/p>","protected":false},"excerpt":{"rendered":"<p>La gesti\u00f3n de fechas y horas en el desarrollo de aplicaciones web siempre ha supuesto un desaf\u00edo. No obstante, una de las librer\u00edas m\u00e1s pr\u00e1cticas y ligeras que han simplificado esta tarea es Day.js. Esta herramienta se ha convertido r\u00e1pidamente en un aliado para los desarrolladores gracias a su sencillez y a su parecido con [&hellip;]<\/p>","protected":false},"author":1,"featured_media":26566,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,90,1588,1499,646,1874,185,1807,1273],"class_list":["post-26565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-con","tag-day-js","tag-facilidad","tag-fechas","tag-horas","tag-javascript","tag-maneja","tag-usando"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/26565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=26565"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/26565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/26566"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=26565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=26565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=26565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}