9. Formatear fechas en Javascript

 

Formatear Fechas en JavaScript con Day.js

1. Introducción a Day.js

1.1. ¿Por qué Day.js?

En Laravel con Blade, tenemos Carbon para manipular fechas fácilmente:

php

{{ $chatbot->created_at->diffForHumans() }} // "hace 2 días"

Pero en JavaScript necesitamos una alternativa. Day.js es:

  • ✅ Minimalista - Solo 2KB (comprimido)

  • ✅ Rápido - Sin dependencias pesadas

  • ✅ Similar a Moment.js - Misma API, más ligero

  • ✅ Modular - Carga solo lo que necesitas

1.2. Comparación de Librerías

Librería

Tamaño

API

Plugins

Popularidad

Day.js

2KB

Similar a Moment

✅

Alta

Moment.js

16KB

Estándar

✅

Muy alta

date-fns

Variable

Funcional

❌

Alta

2. Instalación de Day.js

2.1. Instalar Dependencia

bash

npm install --save-dev dayjs

2.2. Verificar Instalación

json

// package.json

"devDependencies": {

    "dayjs": "^1.11.0"

}

3. Uso Básico de Day.js

3.1. Uso Directo en Componente

vue

<script setup>

import dayjs from 'dayjs'


defineProps({

    chatbot: {

        type: Object,

        required: true

    }

})

</script>


<template>

    <div class="text-sm text-gray-500">

        {{ dayjs(chatbot.created_at).format('DD/MM/YYYY HH:mm') }}

    </div>

</template>

3.2. Formato Predeterminado

Por defecto, Day.js muestra el formato ISO:

javascript

dayjs('2024-07-20T15:30:00.000Z').toString()

// "Sat Jul 20 2024 15:30:00 GMT+0000"

4. Formateo de Fechas

4.1. Método format()

javascript

const date = dayjs('2024-07-20T15:30:00.000Z')


// Formatos comunes

date.format('DD/MM/YYYY')        // "20/07/2024"

date.format('MM/DD/YYYY')        // "07/20/2024"

date.format('YYYY-MM-DD')        // "2024-07-20"

date.format('DD/MM/YYYY HH:mm')  // "20/07/2024 15:30"

date.format('LLL')               // "July 20, 2024 3:30 PM"

4.2. Tokens de Formato

Token

Ejemplo

Descripción

YYYY

2024

Año con 4 dígitos

YY

24

Año con 2 dígitos

MM

07

Mes con 2 dígitos

M

7

Mes sin cero

DD

20

Día con 2 dígitos

D

20

Día sin cero

HH

15

Hora (24h) con 2 dígitos

hh

03

Hora (12h) con 2 dígitos

mm

30

Minutos

ss

45

Segundos

A

PM

AM/PM

5. Tiempos Relativos (fromNow)

5.1. Instalar Plugin de Tiempo Relativo

javascript

import dayjs from 'dayjs'

import relativeTime from 'dayjs/plugin/relativeTime'


// Extender Day.js con el plugin

dayjs.extend(relativeTime)

5.2. Uso de fromNow()

vue

<script setup>

import dayjs from 'dayjs'


// Fecha de ejemplo

const createdAt = '2024-07-20T15:30:00.000Z'


// Tiempo relativo

const timeAgo = dayjs(createdAt).fromNow()

// "a few seconds ago"

// "5 minutes ago"

// "2 hours ago"

// "3 days ago"

</script>


<template>

    <div class="text-sm text-gray-500">

        Creado {{ dayjs(chatbot.created_at).fromNow() }}

    </div>

</template>

5.3. Comparación de Métodos

javascript

const date = dayjs('2024-07-20T15:30:00.000Z')


// Tiempo relativo

date.fromNow()        // "2 days ago"

date.fromNow(true)    // "2 days"

date.toNow()          // "in 2 days"


// Diferencia absoluta

date.from(dayjs())    // "2 days ago"

date.to(dayjs())      // "in 2 days"

6. Localización (Internacionalización)

6.1. Configurar Idioma

javascript

import dayjs from 'dayjs'

import 'dayjs/locale/es'  // Para español


dayjs.locale('es')

6.2. Ejemplo en Español

Antes (inglés):

javascript

dayjs().format('LLL')  // "July 20, 2024 3:30 PM"

dayjs('2024-07-20').fromNow()  // "2 days ago"

Después (español):

javascript

dayjs.locale('es')

dayjs().format('LLL')  // "20 de julio de 2024 15:30"

dayjs('2024-07-20').fromNow()  // "hace 2 días"

6.3. Otros Idiomas

javascript

// Alemán

import 'dayjs/locale/de'

dayjs.locale('de')


// Francés

import 'dayjs/locale/fr'

dayjs.locale('fr')


// Japonés

import 'dayjs/locale/ja'

dayjs.locale('ja')

7. Configuración Centralizada

7.1. Crear Utilidad de Fechas

Crear resources/js/utils/dayjs.js:

javascript

import dayjs from 'dayjs'

import relativeTime from 'dayjs/plugin/relativeTime'


// Importar idioma español

import 'dayjs/locale/es'


// Extender con plugins

dayjs.extend(relativeTime)


// Configurar locale

dayjs.locale('es')


// Exportar instancia configurada

export default dayjs


// Funciones de ayuda

export const formatDate = (date, format = 'DD/MM/YYYY HH:mm') => {

    return dayjs(date).format(format)

}


export const timeAgo = (date) => {

    return dayjs(date).fromNow()

}

7.2. Uso en Componentes

vue

<script setup>

// Importar la utilidad configurada

import dayjs, { formatDate, timeAgo } from '@/utils/dayjs'


defineProps({

    chatbot: {

        type: Object,

        required: true

    }

})

</script>


<template>

    <div>

        <!-- Usando la función helper -->

        <div class="text-sm text-gray-500">

            Creado: {{ formatDate(chatbot.created_at) }}

        </div>

        <div class="text-xs text-gray-400">

            {{ timeAgo(chatbot.created_at) }}

        </div>

        

        <!-- Usando dayjs directamente -->

        <div class="text-xs text-gray-400">

            Última actualización: {{ dayjs(chatbot.updated_at).format('DD/MM/YYYY') }}

        </div>

    </div>

</template>

8. Plugins Adicionales

8.1. Plugins Populares

javascript

import dayjs from 'dayjs'

import relativeTime from 'dayjs/plugin/relativeTime'

import utc from 'dayjs/plugin/utc'

import timezone from 'dayjs/plugin/timezone'

import isBetween from 'dayjs/plugin/isBetween'

import isToday from 'dayjs/plugin/isToday'

import calendar from 'dayjs/plugin/calendar'


// Extender con plugins

dayjs.extend(relativeTime)

dayjs.extend(utc)

dayjs.extend(timezone)

dayjs.extend(isBetween)

dayjs.extend(isToday)

dayjs.extend(calendar)

8.2. Ejemplos de Uso

javascript

// UTC y Timezone

dayjs.utc('2024-07-20T15:30:00Z').tz('America/Guayaquil')


// Verificar si está entre fechas

dayjs('2024-07-20').isBetween('2024-07-01', '2024-07-31') // true


// Verificar si es hoy

dayjs().isToday() // true


// Formato calendario

dayjs().calendar()          // "Today at 3:30 PM"

dayjs('2024-07-19').calendar() // "Yesterday at 3:30 PM"

dayjs('2024-07-15').calendar() // "07/15/2024"

9. Ejemplos Prácticos

9.1. Componente ChatbotListItem Completo

vue

<script setup>

import dayjs, { formatDate, timeAgo } from '@/utils/dayjs'

import { Link } from '@inertiajs/vue3'

import { PrimaryButton, SecondaryButton, DangerButton } from '@/Components/Buttons'


defineProps({

    chatbot: {

        type: Object,

        required: true

    }

})

</script>


<template>

    <div class="flex flex-col md:flex-row md:items-center md:justify-between py-4">

        <div class="flex-1">

            <div class="text-gray-800 dark:text-gray-200 font-medium">

                {{ chatbot.name }}

            </div>

            

            <!-- Varias formas de mostrar la fecha -->

            <div class="flex flex-wrap gap-x-4 text-sm">

                <!-- Formato largo -->

                <span class="text-gray-500 dark:text-gray-400">

                    <span class="font-medium">Creado:</span> 

                    {{ formatDate(chatbot.created_at) }}

                </span>

                

                <!-- Tiempo relativo -->

                <span class="text-gray-500 dark:text-gray-400">

                    <span class="font-medium">Hace:</span> 

                    {{ timeAgo(chatbot.created_at) }}

                </span>

                

                <!-- Formato personalizado -->

                <span class="text-gray-500 dark:text-gray-400">

                    {{ dayjs(chatbot.created_at).format('dddd, D [de] MMMM [de] YYYY') }}

                </span>

            </div>

            

            <!-- Mostrar modelo y temperatura -->

            <div class="flex gap-x-4 mt-1 text-xs text-gray-400 dark:text-gray-500">

                <span>Modelo: {{ chatbot.model }}</span>

                <span>Temp: {{ chatbot.temperature }}</span>

            </div>

        </div>


        <div class="flex space-x-2 mt-4 md:mt-0">

            <PrimaryButton as="a" :href="route('chatbots.show', chatbot.id)">

                Ver

            </PrimaryButton>

            <SecondaryButton as="a" :href="route('chatbots.edit', chatbot.id)">

                Editar

            </SecondaryButton>

            <DangerButton @click="$emit('delete', chatbot.id)">

                Eliminar

            </DangerButton>

        </div>

    </div>

</template>

9.2. Formato de Fecha por Tipo

javascript

// En utils/dayjs.js

export const formatDateByType = (date, type = 'standard') => {

    const d = dayjs(date)

    

    const formats = {

        standard: 'DD/MM/YYYY HH:mm',

        date: 'DD/MM/YYYY',

        time: 'HH:mm:ss',

        full: 'dddd, D [de] MMMM [de] YYYY HH:mm',

        short: 'DD/MM/YY',

        iso: 'YYYY-MM-DDTHH:mm:ssZ'

    }

    

    return d.format(formats[type] || formats.standard)

}

9.3. Filtro de Fechas en Vue

vue

<script setup>

import { computed } from 'vue'

import { formatDate } from '@/utils/dayjs'


const props = defineProps({

    chatbots: {

        type: Array,

        required: true

    }

})


// Agrupar por fecha

const groupedChatbots = computed(() => {

    const groups = {}

    

    props.chatbots.forEach(chatbot => {

        const date = formatDate(chatbot.created_at, 'YYYY-MM-DD')

        if (!groups[date]) {

            groups[date] = []

        }

        groups[date].push(chatbot)

    })

    

    return groups

})

</script>


<template>

    <div v-for="(group, date) in groupedChatbots" :key="date">

        <h3 class="text-lg font-semibold">{{ formatDate(date, 'full') }}</h3>

        <ChatbotListItem v-for="chatbot in group" :key="chatbot.id" :chatbot="chatbot" />

    </div>

</template>

10. Solución de Problemas

10.1. Day.js no encuentra el locale

Problema:

text

Error: Locale "es" is not loaded

Solución:

javascript

import 'dayjs/locale/es' // Asegurar importación

dayjs.locale('es')

10.2. Plugin no cargado

Problema:

text

TypeError: dayjs(...).fromNow is not a function

Solución:

javascript

import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime)

10.3. Fechas en diferente formato

Solución con parse:

javascript

// Formato específico

dayjs('20-07-2024', 'DD-MM-YYYY')


// Custom parse

dayjs('2024-07-20T15:30:00.000Z').format('DD/MM/YYYY')

11. Resumen

11.1. Archivos Creados

Archivo

Propósito

resources/js/utils/dayjs.js

Configuración centralizada de Day.js

11.2. Comandos Utilizados

bash

# Instalación

npm install --save-dev dayjs


# Usar en componente

import dayjs from '@/utils/dayjs'

11.3. Características Implementadas

  • ✅ Formateo de fechas (DD/MM/YYYY, HH:mm, etc.)

  • ✅ Tiempos relativos (hace X días)

  • ✅ Soporte para español

  • ✅ Configuración centralizada y reutilizable

  • ✅ Plugins para funcionalidades avanzadas

¡Ahora las fechas son mucho más legibles y amigables! 

Comentarios

Publicar un comentario

Entradas más populares de este blog

1. Introducción al curso de Chatbots personalizados con Laravel & OpenAI

  1-Curso de Chatbots Personalizados con Laravel y OpenAI Introducción ¡Bienvenido al curso de chatbots personalizados con Laravel y OpenAI! Saul Sotelo desarrollador certificado en Laravel. En este tutorial práctico, aprenderás a construir desde cero una aplicación de chatbots con inteligencia artificial. 1. Descripción General de la Aplicación La aplicación que construiremos permitirá a los usuarios: Crear múltiples chatbots personalizados Asignar nombres y system prompts a cada chatbot Seleccionar modelos de OpenAI Configurar parámetros como la temperatura Añadir fuentes de conocimiento (PDFs y páginas web) Mantener conversaciones con los chatbots 2. Funcionalidades Paso a Paso 2.1. Creación de un Chatbot Paso 1: Asignar un nombre El usuario puede nombrar cada chatbot para identificarlos fácilmente Paso 2: Definir el System Prompt Es el mensaje inicial que guía el comportamiento del chatbot Importante: Este prompt NO se muestra al usuario final Ejemplo: "Eres un experto en gast...
Leer más

2. Prerequisitos para el Curso de Chatbots con Laravel y OpenAI

2. Prerequisitos para el Curso de Chatbots con Laravel y OpenAI   Perfil del Estudiante Este curso está diseñado específicamente para desarrolladores con experiencia previa en Laravel. Sin embargo, si estás comenzando, no te preocupes: tenemos recursos recomendados para ponerte al día. 1. ¿Para Quién es Este Curso? Nivel de Experiencia Requerido Nivel Recomendación Avanzado ✅ ¡Perfecto! Estás listo para comenzar Intermedio ✅ Con conocimientos básicos de Laravel, podrás seguir el curso Principiante ⚠️ Te recomendamos tomar cursos introductorios primero 2. Cursos Recomendados para Principiantes Si apenas estás comenzando con Laravel, te sugerimos completar estos cursos primero: 2.1. Laravel desde Cero Descripción: Curso fundamental que cubre todo lo necesario sobre los fundamentos de Laravel Qué aprenderás: ✅ Estructura básica de Laravel ✅ Rutas y controladores ✅ Vistas y Blade ✅ Eloquent ORM ✅ Migraciones y bases de datos ✅ Validaciones y formularios Duración: Completo para dominar ...
Leer más

4. Herramientas de Calidad

  Configuración de Quality Tools para Laravel y JavaScript 1. Introducción a las Herramientas de Calidad 1.1. ¿Por qué usar Quality Tools? Cuando desarrollamos, es común olvidar detalles de formato como: Posición de llaves de apertura Comas al final de arrays Indentación consistente Orden de clases CSS Beneficios: ✅ Código más legible y consistente ✅ Menos tiempo en revisiones de código ✅ Estándares uniformes en equipos ✅ Enfoque en funcionalidades, no en formato 2. Configuración de Laravel Pint (PHP) 2.1. ¿Qué es Laravel Pint? Laravel Pint es una herramienta de formateo de código diseñada específicamente para proyectos Laravel. Utiliza PHP CS Fixer internamente y sigue los estándares: PSR-2 - Estándar de codificación PSR-4 - Estándar de autoloading 2.2. Verificación en composer.json Laravel Pint ya viene incluido por defecto en las dependencias de desarrollo: json "require-dev" : {      "laravel/pint" : "^1.0" } 2.3. Uso Básico de Laravel Pint Ejecutar ...
Leer más