Mastering Vue.js Development with ‘Day.js’: A Comprehensive Guide to Date and Time Manipulation

Written by

learnmodernjavascript

in

In the world of web development, dealing with dates and times is a common yet often complex task. From displaying the current time to calculating time differences and formatting dates for different locales, there’s a lot to consider. JavaScript’s built-in `Date` object, while functional, can be cumbersome and lead to messy code. This is where libraries like Day.js come in. Day.js is a lightweight, immutable date and time library that provides a simplified API for parsing, validating, manipulating, and formatting dates. It’s designed to be a modern replacement for Moment.js, offering similar functionality with a smaller footprint and improved performance. This tutorial will guide you through using Day.js in your Vue.js projects, helping you master date and time manipulation with ease.

Why Day.js? The Problem and the Solution

Working with dates and times in JavaScript can quickly become a headache. The native `Date` object has several quirks, such as inconsistent month indexing (0-11), and the lack of a straightforward way to format dates in various ways. Moment.js was a popular solution, but it has become quite large over time, leading to potential performance issues, especially in front-end applications. Day.js addresses these problems by offering:

  • Lightweight: Day.js is significantly smaller than Moment.js, reducing the bundle size of your application.
  • Immutable: Day.js objects are immutable, meaning that methods like `add()` or `subtract()` return a new Day.js object instead of modifying the original, preventing unexpected side effects.
  • Simplified API: Day.js provides a clean and intuitive API, making it easier to parse, validate, manipulate, and format dates.
  • Modern Approach: Day.js embraces a modern approach to date and time manipulation, aligning with current JavaScript best practices.
  • Moment.js Compatibility: Day.js offers a similar API to Moment.js, making it easy to migrate your existing code.

By using Day.js, you can write cleaner, more efficient, and more maintainable code for handling dates and times in your Vue.js projects.

Setting Up Day.js in Your Vue.js Project

Integrating Day.js into your Vue.js project is straightforward. You can install it using npm or yarn:

npm install dayjs --save
# or
yarn add dayjs

Once installed, you can import and use Day.js in your Vue components. There are several ways to do this, depending on your needs. Let’s explore some common use cases.

1. Importing Day.js in a Component

The simplest way to use Day.js is to import it directly into a Vue component:


import dayjs from 'dayjs'

export default {
  data() {
    return {
      now: dayjs()
    }
  },
  mounted() {
    console.log(this.now.format('YYYY-MM-DD HH:mm:ss'))
  }
}

In this example, we import `dayjs` and then create a `now` data property initialized with the current date and time. We then format the date using the `format()` method. This is a basic example of how to use Day.js within a component.

2. Creating a Global Day.js Instance

If you need to use Day.js across multiple components, you can create a global instance and make it available throughout your application. This can be done in your main.js or app.js file:

// main.js or app.js
import Vue from 'vue'
import dayjs from 'dayjs'

Vue.prototype.$dayjs = dayjs

new Vue({ /* ... */ })

Now, you can access Day.js in any component using `this.$dayjs`:


export default {
  mounted() {
    console.log(this.$dayjs().format('YYYY-MM-DD'))
  }
}

This approach keeps your components cleaner as you don’t have to import Day.js in each one.

3. Using Day.js as a Plugin

Another option is to create a Vue plugin. This can be useful for adding custom methods or configurations to Day.js. Create a file, such as `dayjs.js`:

// dayjs.js
import dayjs from 'dayjs'

// Add any plugins or configurations here

export default {
  install(Vue) {
    Vue.prototype.$dayjs = dayjs
  }
}

Then, import and use the plugin in your `main.js`:

// main.js
import Vue from 'vue'
import DayjsPlugin from './dayjs'

Vue.use(DayjsPlugin)

new Vue({ /* ... */ })

This method gives you more control and flexibility to extend Day.js with custom functionalities.

Core Day.js Concepts and Usage

Now that you’ve set up Day.js, let’s dive into its core concepts and how to use them effectively in your Vue.js projects.

1. Parsing Dates

Parsing involves converting a string representation of a date into a Day.js object. Day.js supports various date formats. Here are a few examples:

import dayjs from 'dayjs'

const date1 = dayjs('2024-07-26') // YYYY-MM-DD
const date2 = dayjs('07/26/2024') // MM/DD/YYYY
const date3 = dayjs('2024-07-26 10:30:00') // YYYY-MM-DD HH:mm:ss

console.log(date1.format('YYYY-MM-DD')); // Output: 2024-07-26

Day.js intelligently parses most common date formats. If you have a specific format, you might need to use plugins (covered later) to handle it.

2. Formatting Dates

Formatting is the process of converting a Day.js object into a string representation. Day.js provides a flexible `format()` method that allows you to specify the desired output format using a variety of tokens:

import dayjs from 'dayjs'

const now = dayjs()

console.log(now.format('YYYY-MM-DD')); // Output: 2024-07-26 (example)
console.log(now.format('MM/DD/YYYY')); // Output: 07/26/2024 (example)
console.log(now.format('dddd, MMMM D, YYYY')); // Output: Friday, July 26, 2024 (example)
console.log(now.format('HH:mm:ss')); // Output: 10:45:30 (example)

Here are some common format tokens:

  • `YYYY`: 4-digit year
  • `YY`: 2-digit year
  • `MM`: 2-digit month (01-12)
  • `M`: Month (1-12)
  • `DD`: 2-digit day of the month (01-31)
  • `D`: Day of the month (1-31)
  • `HH`: 2-digit hour (00-23)
  • `H`: Hour (0-23)
  • `mm`: 2-digit minute (00-59)
  • `m`: Minute (0-59)
  • `ss`: 2-digit second (00-59)
  • `s`: Second (0-59)
  • `dddd`: Day of the week (e.g., Monday)
  • `ddd`: Abbreviated day of the week (e.g., Mon)
  • `MMMM`: Month name (e.g., July)
  • `MMM`: Abbreviated month name (e.g., Jul)

3. Manipulating Dates

Day.js provides methods for adding, subtracting, and modifying dates. These methods return a new Day.js object, ensuring immutability.

import dayjs from 'dayjs'

const now = dayjs()
const tomorrow = now.add(1, 'day')
const yesterday = now.subtract(1, 'day')
const nextMonth = now.add(1, 'month')

console.log(tomorrow.format('YYYY-MM-DD'));
console.log(yesterday.format('YYYY-MM-DD'));
console.log(nextMonth.format('YYYY-MM-DD'));

You can add or subtract different units of time, such as days, months, years, hours, minutes, and seconds. The second argument of `add()` and `subtract()` specifies the unit (e.g., ‘day’, ‘month’, ‘year’).

4. Comparing Dates

Day.js offers methods for comparing dates, such as `isBefore()`, `isAfter()`, and `isSame()`:

import dayjs from 'dayjs'

const date1 = dayjs('2024-07-25')
const date2 = dayjs('2024-07-26')

console.log(date1.isBefore(date2)); // Output: true
console.log(date2.isAfter(date1));  // Output: true
console.log(date1.isSame(date2));   // Output: false

These methods are useful for validating date ranges, checking deadlines, and more.

5. Getting Time Differences

You can calculate the difference between two dates using the `diff()` method:

import dayjs from 'dayjs'

const date1 = dayjs('2024-07-20')
const date2 = dayjs('2024-07-26')

const diffInDays = date2.diff(date1, 'day')
console.log(diffInDays); // Output: 6

The `diff()` method takes two arguments: the date to compare against and the unit of time you want the difference in (e.g., ‘day’, ‘month’, ‘year’).

Advanced Techniques: Plugins and Localization

Day.js’s functionality can be extended using plugins. These plugins add extra features, such as support for specific date formats, time zones, and more. Localization is another important aspect, allowing you to format dates and display them in different languages and regions.

1. Using Plugins

To use a plugin, you first need to install it. For example, to handle time zones, you would install the `dayjs/plugin/timezone` and `dayjs/plugin/utc` plugins:

npm install dayjs --save
npm install dayjs/plugin/timezone --save
npm install dayjs/plugin/utc --save

Then, you need to import and use the plugins:

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

// Set the default timezone (e.g., 'America/Los_Angeles')
dayjs.tz.setDefault('America/Los_Angeles')

const nowInLosAngeles = dayjs().tz('America/Los_Angeles')
console.log(nowInLosAngeles.format('YYYY-MM-DD HH:mm:ss'))

Here are some other useful Day.js plugins:

  • `dayjs/plugin/isBetween`: Checks if a date is between two other dates.
  • `dayjs/plugin/relativeTime`: Displays relative time (e.g., “in 5 minutes”, “2 days ago”).
  • `dayjs/plugin/duration`: Calculates durations.

2. Localization

Day.js supports localization through the use of language-specific plugins. For example, to use French, you would install the `dayjs/plugin/localeData` plugin and the French locale:

npm install dayjs/plugin/localeData --save
npm install dayjs/locale/fr --save

Then, import the plugin and the locale, and use the `locale()` method:

import dayjs from 'dayjs'
import 'dayjs/locale/fr'
import localeData from 'dayjs/plugin/localeData'

dayjs.extend(localeData)

dayjs.locale('fr')

console.log(dayjs().format('dddd, MMMM D, YYYY')) // Output in French

You can find a list of available locales on the Day.js website.

Common Mistakes and How to Avoid Them

While Day.js is designed to be user-friendly, there are a few common mistakes that developers often make. Here’s how to avoid them:

1. Forgetting to Install Plugins

Day.js is lightweight by design, which means not all features are included by default. If you need functionality like time zone support or relative time, you must install and import the appropriate plugins. Without installing the plugins, you will get errors.

Solution: Always check the Day.js documentation to see if you need to install any plugins for the features you are using.

2. Modifying Day.js Objects Directly

Day.js objects are immutable. This means that methods like `add()` and `subtract()` do not modify the original object. Instead, they return a new object. Modifying the original object directly will lead to unexpected results and bugs.

Solution: Always assign the result of `add()`, `subtract()`, and other manipulation methods to a new variable.

const now = dayjs()
const tomorrow = now.add(1, 'day') // Correct
// Incorrect: now.add(1, 'day')

3. Incorrect Formatting Tokens

Using the wrong format tokens in the `format()` method can lead to unexpected output. It’s essential to understand the correct tokens for the desired date and time formatting.

Solution: Refer to the Day.js documentation for a complete list of formatting tokens and double-check your format strings.

4. Not Considering Time Zones

If your application deals with users in different time zones, you must handle time zone conversions correctly. Without proper time zone handling, date and time calculations can be inaccurate.

Solution: Use the `dayjs/plugin/timezone` and `dayjs/plugin/utc` plugins to handle time zone conversions. Be sure to set the default time zone or convert to UTC when necessary.

5. Not Using the Latest Version

Day.js is actively maintained, with new features, bug fixes, and performance improvements being released regularly. Using an outdated version can cause issues.

Solution: Regularly update Day.js to the latest version using npm or yarn. Check the documentation for any breaking changes.

Real-World Examples in Vue.js

Let’s look at some real-world examples of how to use Day.js in your Vue.js applications:

1. Displaying the Current Time

In a Vue component, display the current time and update it every second:


  <div>
    <p>Current Time: {{ currentTime }}</p>
  </div>



import dayjs from 'dayjs'

export default {
  data() {
    return {
      currentTime: dayjs().format('HH:mm:ss')
    }
  },
  mounted() {
    this.updateTime()
    this.interval = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    updateTime() {
      this.currentTime = dayjs().format('HH:mm:ss')
    }
  }
}

This example demonstrates how to use `dayjs()` to get the current time and `format()` to display it in a user-friendly format. The `setInterval` function ensures that the time updates every second.

2. Calculating the Time Difference

Calculate the time difference between two dates and display it:


  <div>
    <p>Start Date: {{ startDate.format('YYYY-MM-DD') }}</p>
    <p>End Date: {{ endDate.format('YYYY-MM-DD') }}</p>
    <p>Difference in Days: {{ diffInDays }}</p>
  </div>



import dayjs from 'dayjs'

export default {
  data() {
    const startDate = dayjs('2024-07-20')
    const endDate = dayjs('2024-07-26')
    return {
      startDate,
      endDate,
      diffInDays: endDate.diff(startDate, 'day')
    }
  }
}

This example demonstrates how to use the `diff()` method to calculate the difference in days between two dates. This is useful for things like calculating the number of days until a deadline or the duration of an event.

3. Formatting Dates for Different Locales

Display dates in different locales using the localization plugin:


  <div>
    <p>Date in English: {{ dateInEnglish.format('dddd, MMMM D, YYYY') }}</p>
    <p>Date in French: {{ dateInFrench.format('dddd, MMMM D, YYYY') }}</p>
  </div>



import dayjs from 'dayjs'
import 'dayjs/locale/fr'
import localeData from 'dayjs/plugin/localeData'

dayjs.extend(localeData)

export default {
  data() {
    const date = dayjs()
    dayjs.locale('en') // Set default locale to English
    const dateInEnglish = date
    dayjs.locale('fr') // Set locale to French
    const dateInFrench = date
    return {
      dateInEnglish,
      dateInFrench
    }
  }
}

This example shows how to import and use the French locale to display a date in French, demonstrating the flexibility of Day.js for internationalization.

Key Takeaways and Best Practices

Here’s a recap of the key takeaways and best practices for using Day.js in your Vue.js projects:

  • Installation: Install Day.js using npm or yarn.
  • Importing: Import Day.js into your Vue components or create a global instance.
  • Parsing: Use `dayjs(‘date string’)` to parse date strings.
  • Formatting: Use `format(‘format string’)` to format dates.
  • Manipulation: Use `add()`, `subtract()`, and other methods for date manipulation.
  • Comparison: Use `isBefore()`, `isAfter()`, and `isSame()` to compare dates.
  • Plugins: Use plugins for advanced features like time zones and relative time.
  • Localization: Use locale-specific plugins for internationalization.
  • Immutability: Remember that Day.js objects are immutable.
  • Documentation: Always refer to the Day.js documentation for detailed information and updates.

FAQ

Here are some frequently asked questions about Day.js:

  1. Is Day.js a replacement for Moment.js?
    Yes, Day.js is designed to be a modern replacement for Moment.js. It offers a similar API but is much smaller and has better performance.
  2. How do I handle time zones with Day.js?
    You need to install and use the `dayjs/plugin/timezone` and `dayjs/plugin/utc` plugins.
  3. Can I use Day.js with Vue CLI?
    Yes, you can easily integrate Day.js into any Vue.js project, including those created with Vue CLI.
  4. How do I format dates in different locales?
    You need to install the appropriate locale plugin and use the `locale()` method to set the locale.
  5. Does Day.js support relative time?
    Yes, you can use the `dayjs/plugin/relativeTime` plugin to display relative time (e.g., “2 days ago”).

Day.js is a powerful and efficient library for date and time manipulation in your Vue.js applications. It simplifies the complexities of working with dates, providing a clean and intuitive API. By understanding the core concepts, using plugins, and following best practices, you can easily manage dates and times, enhancing the functionality and user experience of your web applications. With its lightweight nature and modern approach, Day.js is an excellent choice for any Vue.js developer looking for a reliable date and time solution. Embrace Day.js and streamline your date-handling tasks, making your projects more efficient and your code more readable.

More posts