Building a calendar or date picker component using Moment.js

05 Oct 2023

When developing a web application that requires date selection functionality, building a calendar or date picker component is a common task. In this article, we will explore how to build a calendar or date picker component using Moment.js, a popular JavaScript library for manipulating, parsing, and formatting dates.

Introduction to Moment.js
Setting Up the Project
Creating the Calendar Component
Managing Date Selection
Customizing the Calendar
Conclusion

Introduction to Moment.js

Moment.js is a lightweight and powerful JavaScript library that makes working with dates and time easier. It provides various functions for parsing, validating, manipulating, and formatting dates. One of the key features of Moment.js is its ability to handle date calculations and formatting across different timezones.

Setting Up the Project

To get started, let’s set up a basic project structure. Create an HTML file and include the Moment.js library by adding the following script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Next, create a container element in your HTML where the calendar component will be rendered:

<div id="calendar-container"></div>

Creating the Calendar Component

Now, let’s start building the calendar component. We will create a JavaScript function that generates the HTML markup for the calendar based on the current month and year. Here’s an example implementation:

function renderCalendar() {
  const container = document.getElementById('calendar-container');
  const currentDate = moment();

  const calendarHTML = `
    <div class="calendar-header">
      <button class="prev-button">&lt;</button>
      <h2>${currentDate.format('MMMM YYYY')}</h2>
      <button class="next-button">&gt;</button>
    </div>
    <table class="calendar-table">
      <!-- Calendar days go here -->
    </table>
  `;

  container.innerHTML = calendarHTML;

  // Add event listener for previous and next buttons
  const prevButton = container.querySelector('.prev-button');
  const nextButton = container.querySelector('.next-button');

  prevButton.addEventListener('click', () => {
    currentDate.subtract(1, 'month');
    renderCalendar();
  });

  nextButton.addEventListener('click', () => {
    currentDate.add(1, 'month');
    renderCalendar();
  });

  // Render calendar days
  const table = container.querySelector('.calendar-table');
  // Add code to generate calendar days based on currentDate
}

In the above code, we create a renderCalendar function that generates the HTML markup for the calendar. The current month and year are obtained using moment(), and the calendar HTML is inserted into the container element.

We also add event listeners to the previous and next buttons to navigate between months. When the buttons are clicked, the currentDate is updated and renderCalendar is called again to regenerate the calendar.

Managing Date Selection

To handle date selection, we can enhance the renderCalendar function to add click event listeners to each calendar day. Here’s an updated version of the function:

function renderCalendar() {
  // ...

  // Render calendar days
  const table = container.querySelector('.calendar-table');
  table.innerHTML = '';

  const firstDay = currentDate.clone().startOf('month').startOf('week');
  const lastDay = currentDate.clone().endOf('month').endOf('week');

  let day = firstDay.clone();

  while (day.isSameOrBefore(lastDay, 'day')) {
    const isCurrentMonth = day.isSame(currentDate, 'month');
    const isToday = day.isSame(moment(), 'day');

    const dayCell = document.createElement('td');
    dayCell.textContent = day.format('D');
    dayCell.classList.add('calendar-day');
    if (!isCurrentMonth) {
      dayCell.classList.add('non-current-month');
    }
    if (isToday) {
      dayCell.classList.add('today');
    }

    dayCell.addEventListener('click', () => {
      handleDateSelection(day);
    });

    table.appendChild(dayCell);

    // Increment day by a day
    day.add(1, 'day');
  }
}

In the updated code, we iterate over each day of the current month and create a table cell (td) element for each day. We add appropriate CSS classes to highlight the current month, non-current months, and the current day.

An event listener is attached to each day cell to call the handleDateSelection function when clicked. You can implement the handleDateSelection function according to your application’s requirements.

Customizing the Calendar

You can further customize the calendar by adding CSS styles and additional functionality. For example, you can style the calendar days, header, and navigation buttons to match your application’s design. You can also add additional features like disabling certain dates, highlighting selected dates, or implementing different calendar schemes.

Conclusion

In this article, we learned how to build a calendar or date picker component using Moment.js. We set up the project, created the calendar component, and managed date selection. You can use this as a starting point and customize it according to your specific needs. Moment.js provides many useful methods for working with dates, so feel free to explore its documentation for more advanced functionality.

Table of Contents