Supercharge Your React App with ‘dayjs’: A Practical Guide for Developers

Written by

learnmodernjavascript

in

In the fast-paced world of web development, managing dates and times efficiently is crucial. Whether you’re building a simple to-do list app or a complex e-commerce platform, dealing with time zones, formatting dates, and calculating time differences is a common requirement. While JavaScript’s built-in `Date` object can handle these tasks, it often leads to verbose and error-prone code. This is where libraries like ‘dayjs’ come to the rescue. This tutorial will guide you through the essentials of using ‘dayjs’ in your React applications, making date and time manipulation a breeze.

Why ‘dayjs’?

‘dayjs’ is a lightweight JavaScript library that provides a modern, immutable, and easy-to-use API for working with dates and times. It’s designed to be a drop-in replacement for Moment.js, a popular but now deprecated library. ‘dayjs’ offers several advantages:

  • Lightweight: ‘dayjs’ is significantly smaller than Moment.js, resulting in faster load times and improved performance.
  • Immutable: ‘dayjs’ objects are immutable, meaning their values cannot be changed after creation, preventing unexpected side effects.
  • Modern API: ‘dayjs’ boasts a clean and intuitive API, making it easy to perform various date and time operations.
  • Extensible: ‘dayjs’ supports plugins, allowing you to extend its functionality with features like time zones, relative time, and more.

Setting Up ‘dayjs’ in Your React Project

Before diving into the code, you’ll need to install ‘dayjs’ in your React project. Open your terminal and navigate to your project’s root directory. Then, run the following command:

npm install dayjs --save

This command installs ‘dayjs’ and adds it as a dependency in your `package.json` file.

Basic Usage

Let’s start with some fundamental examples to get you familiar with ‘dayjs’.

Importing ‘dayjs’

First, import ‘dayjs’ into your React component:

import dayjs from 'dayjs';

Creating a ‘dayjs’ Object

You can create a ‘dayjs’ object in several ways:

  • Current Date and Time:
const now = dayjs(); // Creates a 'dayjs' object with the current date and time
  • From a Date String:
const dateFromString = dayjs('2023-11-20'); // Creates a 'dayjs' object from a date string
  • From a Date Object:
const dateFromDateObject = dayjs(new Date()); // Creates a 'dayjs' object from a JavaScript Date object

Formatting Dates

‘dayjs’ provides a powerful `format()` method to format dates in various ways. Here are some common format patterns:

  • `YYYY`: 4-digit year
  • `MM`: 2-digit month (01-12)
  • `DD`: 2-digit day of the month (01-31)
  • `HH`: 2-digit hour (00-23)
  • `mm`: 2-digit minute (00-59)
  • `ss`: 2-digit second (00-59)
  • `SSS`: 3-digit millisecond (000-999)
  • `MMMM`: Full month name (e.g., January)
  • `MMM`: Abbreviated month name (e.g., Jan)
  • `dddd`: Full day of the week (e.g., Monday)
  • `ddd`: Abbreviated day of the week (e.g., Mon)

Here’s how to use the `format()` method:

import dayjs from 'dayjs';

function MyComponent() {
  const now = dayjs();
  const formattedDate = now.format('YYYY-MM-DD HH:mm:ss');

  return (
    <div>
      <p>Current Date and Time: {formattedDate}</p>
    </div>
  );
}

export default MyComponent;

Manipulating Dates

‘dayjs’ offers methods to add, subtract, and modify dates easily. Here are some examples:

  • Adding Days:
const tomorrow = dayjs().add(1, 'day'); // Adds one day
  • Subtracting Months:
const lastMonth = dayjs().subtract(1, 'month'); // Subtracts one month
  • Adding Years:
const inFiveYears = dayjs().add(5, 'year'); // Adds five years

Here’s a complete example:

import dayjs from 'dayjs';

function MyComponent() {
  const now = dayjs();
  const tomorrow = now.add(1, 'day');
  const formattedTomorrow = tomorrow.format('YYYY-MM-DD');

  return (
    <div>
      <p>Today: {now.format('YYYY-MM-DD')}</p>
      <p>Tomorrow: {formattedTomorrow}</p>
    </div>
  );
}

export default MyComponent;

Comparing Dates

You can compare ‘dayjs’ objects using methods like `isBefore()`, `isAfter()`, and `isSame()`. These methods return boolean values.

import dayjs from 'dayjs';

function MyComponent() {
  const date1 = dayjs('2023-11-19');
  const date2 = dayjs('2023-11-20');

  const isBefore = date1.isBefore(date2);
  const isAfter = date1.isAfter(date2);
  const isSame = date1.isSame(date2);

  return (
    <div>
      <p>Is date1 before date2? {isBefore ? 'Yes' : 'No'}</p>
      <p>Is date1 after date2? {isAfter ? 'Yes' : 'No'}</p>
      <p>Is date1 the same as date2? {isSame ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default MyComponent;

Advanced Usage: Plugins

‘dayjs’ is designed to be extensible through plugins. Plugins add extra functionality, such as time zone support, relative time calculations, and more. To use a plugin, you’ll first need to install it and then import and use it with ‘dayjs’.

Time Zones

Handling time zones can be tricky. The ‘dayjs’ plugin to handle time zones is called `dayjs/plugin/timezone` and `dayjs/plugin/utc`.

First, install the necessary plugins:

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

Then, import and use them in your component:

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

// Load the plugins
dayjs.extend(utc);
dayjs.extend(timezone);

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

function MyComponent() {
  const now = dayjs();

  // Convert to a specific timezone
  const losAngelesTime = now.tz('America/Los_Angeles');
  const newYorkTime = now.tz('America/New_York');

  return (
    <div>
      <p>Current Time (UTC): {now.utc().format('YYYY-MM-DD HH:mm:ss')}</p>
      <p>Los Angeles Time: {losAngelesTime.format('YYYY-MM-DD HH:mm:ss')}</p>
      <p>New York Time: {newYorkTime.format('YYYY-MM-DD HH:mm:ss')}</p>
    </div>
  );
}

export default MyComponent;

Relative Time

The `relativeTime` plugin allows you to display time differences in a human-readable format (e.g., “2 days ago,” “in 3 hours”).

First, install the plugin:

npm install dayjs --save
npm install relativeTime --save

Then, import and use it:

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

function MyComponent() {
  const now = dayjs();
  const futureDate = dayjs().add(2, 'day');
  const pastDate = dayjs().subtract(3, 'day');

  const fromNow = futureDate.fromNow();
  const fromNowPast = pastDate.fromNow();

  return (
    <div>
      <p>Future Date: {fromNow}</p>
      <p>Past Date: {fromNowPast}</p>
    </div>
  );
}

export default MyComponent;

Common Mistakes and How to Fix Them

1. Not Importing Plugins Correctly

Make sure you import and extend ‘dayjs’ with the plugins you need. Forgetting to extend ‘dayjs’ with a plugin will result in errors when you try to use its functionality. Always check the plugin’s documentation for the correct import and usage instructions.

Incorrect:

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';

const now = dayjs().tz('America/Los_Angeles'); // Error: tz is not a function

Correct:

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(timezone);

const now = dayjs().tz('America/Los_Angeles'); // Correct

2. Confusing Date Formats

Using the wrong format string in the `format()` method can lead to unexpected results. Double-check the format codes and ensure they match your desired output. Refer to the ‘dayjs’ documentation for a complete list of format codes.

Incorrect:

const now = dayjs();
const formattedDate = now.format('MM-DD-YYYY'); // Might not display the date as intended

Correct:

const now = dayjs();
const formattedDate = now.format('YYYY-MM-DD'); // Displays the date in a clear and standard format

3. Not Handling Time Zones Properly

If your application deals with users from different time zones, failing to handle time zones correctly can lead to confusion and errors. Use the `timezone` plugin to convert dates to the correct time zones. Remember to set a default timezone if necessary.

Incorrect:

const now = dayjs(); // Assumes the user's local time zone, which may not be the desired behavior

Correct:

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(timezone);
dayjs.tz.setDefault('America/Los_Angeles');
const nowInLA = dayjs().tz('America/Los_Angeles'); // Handles time zone conversion

4. Modifying ‘dayjs’ Objects Directly (Immutability)

Remember that ‘dayjs’ objects are immutable. Do not attempt to modify them directly. Instead, use methods like `add()`, `subtract()`, and `format()` to create new ‘dayjs’ objects with the desired changes. Directly modifying a ‘dayjs’ object will not work and may lead to unexpected behavior.

Incorrect:

const now = dayjs();
now.add(1, 'day'); // Incorrect: 'now' is not modified

Correct:

const now = dayjs();
const tomorrow = now.add(1, 'day'); // Correct: creates a new 'dayjs' object 'tomorrow'

Step-by-Step Instructions: Building a Simple Date Picker with ‘dayjs’

Let’s create a basic date picker component using ‘dayjs’. This component will allow the user to select a date and display it.

1. Create a new React component:

// DatePicker.js
import React, { useState } from 'react';
import dayjs from 'dayjs';

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs()); // Initialize with current date

  const handleDateChange = (event) => {
    const newDate = dayjs(event.target.value); // Parse the input value
    setSelectedDate(newDate);
  };

  return (
    <div>
      <input
        type="date"
        value={selectedDate.format('YYYY-MM-DD')}
        onChange={handleDateChange}
      />
      <p>Selected Date: {selectedDate.format('MMMM DD, YYYY')}</p>
    </div>
  );
}

export default DatePicker;

2. Import and use the component:

// App.js
import React from 'react';
import DatePicker from './DatePicker';

function App() {
  return (
    <div>
      <h2>Date Picker Example</h2>
      <DatePicker />
    </div>
  );
}

export default App;

Explanation:

  • The `DatePicker` component uses the `useState` hook to manage the selected date.
  • It initializes the state with the current date using `dayjs()`.
  • The `handleDateChange` function updates the state when the user selects a new date from the input. It parses the input value using `dayjs()`.
  • The input’s `value` attribute is set to the formatted selected date.
  • The selected date is displayed in a user-friendly format.
  • The `App` component renders the `DatePicker` component.

Summary / Key Takeaways

In this tutorial, you’ve learned how to leverage the ‘dayjs’ library to simplify date and time manipulation in your React applications. You’ve seen how to install ‘dayjs’, create ‘dayjs’ objects, format dates, manipulate dates, and use plugins like time zones and relative time. By incorporating ‘dayjs’ into your projects, you can write cleaner, more efficient, and more maintainable code for handling dates and times.

  • ‘dayjs’ is a lightweight and modern JavaScript library for date and time manipulation.
  • It offers an intuitive API and is a good alternative to Moment.js.
  • You can easily format, manipulate, and compare dates using ‘dayjs’ methods.
  • Plugins extend ‘dayjs’ functionality, such as time zones and relative time.
  • Always remember to handle time zones correctly if your application serves a global audience.

FAQ

  1. Why should I use ‘dayjs’ instead of the built-in JavaScript `Date` object?

    ‘dayjs’ provides a more user-friendly and consistent API for date and time operations, making your code cleaner and less prone to errors. It also offers features like immutability and plugins for advanced functionality like time zones.

  2. How do I handle time zones with ‘dayjs’?

    Use the `timezone` plugin. Install the plugin, import it, and extend ‘dayjs’ with it. Then, you can use the `tz()` method to convert dates to specific time zones.

  3. Is ‘dayjs’ a replacement for Moment.js?

    Yes, ‘dayjs’ is designed to be a drop-in replacement for Moment.js. It offers similar functionality with a smaller size and a more modern API. Moment.js is no longer actively maintained.

  4. How do I format a date in a specific way?

    Use the `format()` method with a format string. For example, `dayjs().format(‘YYYY-MM-DD’)` will format the current date as “2023-11-20”. Refer to the ‘dayjs’ documentation for a complete list of format codes.

With ‘dayjs’ at your disposal, you’re well-equipped to handle any date and time-related challenge that comes your way in your React projects. Embrace its simplicity and power to build more robust and user-friendly applications.

More posts