Build A Custom Date Picker With HTML, CSS & JavaScript

Alex Johnson

-Oct 1, 2025

Build A Custom Date Picker With HTML, CSS & JavaScript

Creating a date picker component from scratch using HTML, CSS, and JavaScript is a fantastic way to enhance your web development skills. A well-designed date picker not only improves the user experience but also gives you greater control over the presentation and functionality compared to relying solely on browser-native date inputs. This comprehensive guide will walk you through the process of building a fully functional and accessible date picker, covering everything from the basic structure to advanced features like date formatting and accessibility considerations. Let's dive in and learn how to create a date picker that stands out!

Why Build a Custom Date Picker?

Before we jump into the code, let's discuss why you might want to create your own date picker instead of using the built-in HTML5 <input type="date"> element. While the native date input is convenient, it often lacks the flexibility and styling options needed for modern web applications. Browser inconsistencies in rendering the native date picker can also lead to a fragmented user experience across different platforms and devices. By building a custom date picker, you gain complete control over:

Appearance: Style the date picker to seamlessly match your website's design.
Functionality: Add custom features like date range selection, disabled dates, and custom date formats.
Accessibility: Ensure your date picker is usable by everyone, including users with disabilities.
Consistency: Provide a consistent experience across all browsers and devices.

Moreover, building a custom component like a date picker is an excellent exercise in understanding front-end development principles. You'll gain hands-on experience with HTML structure, CSS styling, and JavaScript logic, which are essential skills for any web developer. So, let’s embark on this journey of creating a versatile date picker component.

Setting Up the HTML Structure

First things first, we need to lay the foundation with HTML. The basic structure of our date picker will consist of a container element, a display for the selected date, controls for navigating between months, and a grid to display the calendar days. Let’s break down the HTML markup step-by-step:

<div class="date-picker">
  <div class="date-picker-header">
    <span class="date-picker-current-month"></span>
    <div class="date-picker-navigation">
      <button class="date-picker-prev-month">&lt;</button>
      <button class="date-picker-next-month">&gt;</button>
    </div>
  </div>
  <div class="date-picker-body">
    <div class="date-picker-weekdays"></div>
    <div class="date-picker-calendar"></div>
  </div>
</div>

Here’s what each part does:

.date-picker: The main container for our date picker component. This will hold all the other elements and provide a boundary for our styling.
.date-picker-header: This section contains the current month display and the navigation buttons. It gives users a quick overview of the currently displayed month and allows them to navigate to previous or next months.
.date-picker-current-month: A span element that will display the current month and year. This is dynamically updated using JavaScript as the user navigates through the calendar.
.date-picker-navigation: This div houses the navigation buttons, allowing users to move between months. It keeps the buttons grouped and provides a container for styling.
.date-picker-prev-month: A button to navigate to the previous month. The “<” is an HTML entity for the less-than symbol, which we use here as a visual cue for navigation.
.date-picker-next-month: A button to navigate to the next month. The “>” is an HTML entity for the greater-than symbol, serving as the visual cue for navigating forward.
.date-picker-body: This section contains the actual calendar grid, including the weekday headers and the individual day cells.
.date-picker-weekdays: A div to display the days of the week (Sun, Mon, Tue, etc.). These are static headers that help users understand the calendar layout.
.date-picker-calendar: A div that will hold the individual day cells. These cells will be dynamically generated using JavaScript based on the current month and year.

This HTML structure provides a solid foundation for our date picker. The clear separation of concerns—header, navigation, and calendar body—makes it easier to style and manipulate with CSS and JavaScript. Now that we have our HTML in place, let’s move on to the styling.

Styling the Date Picker with CSS

With the HTML structure set up, the next step is to style our date picker using CSS. The goal is to create a visually appealing and user-friendly calendar interface. We'll focus on layout, typography, colors, and interactive states. Here’s a basic CSS stylesheet to get us started:

.date-picker {
  width: 300px;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.date-picker-header {
  background-color: #f0f0f0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-picker-current-month {
  font-weight: bold;
}

.date-picker-navigation button {
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
}

.date-picker-body {
  padding: 10px;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 5px;
  font-weight: bold;
  color: #777;
}

.date-picker-weekdays div {
  text-align: center;
}

.date-picker-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.date-picker-calendar button {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}

.date-picker-calendar button.selected {
  background-color: #007bff;
  color: #fff;
}

.date-picker-calendar button.today {
  border-color: #007bff;
}

.date-picker-calendar button:hover {
  background-color: #f9f9f9;
}

Let's break down the key styles:

.date-picker: Sets the width, font, border, and general appearance of the date picker container. The overflow: hidden ensures that any content that overflows the container is clipped, preventing layout issues.
.date-picker-header: Styles the header section with a light gray background, padding, and a flexbox layout to align the month display and navigation buttons. justify-content: space-between ensures that the month display and buttons are spaced evenly.
.date-picker-current-month: Makes the month display text bold for emphasis.
.date-picker-navigation button: Styles the navigation buttons to look clean and minimal. They have a transparent background, no border, and a cursor that changes to a pointer on hover.
.date-picker-body: Adds padding to the body section, creating some space around the calendar grid.
.date-picker-weekdays: Uses a CSS grid layout to display the weekdays (Sun, Mon, Tue, etc.). grid-template-columns: repeat(7, 1fr) creates seven equal-width columns. The weekday labels are styled with bold text and a gray color.
.date-picker-weekdays div: Centers the text within each weekday cell.
.date-picker-calendar: This is where the magic happens for the calendar grid. We again use a CSS grid layout with seven columns. The gap: 5px adds spacing between the day cells.
.date-picker-calendar button: Styles the individual day buttons. They have a white background, a light gray border, padding, and rounded corners. The cursor: pointer indicates that these are interactive elements.
.date-picker-calendar button.selected: Highlights the selected date with a blue background and white text. This class will be dynamically added using JavaScript when a date is selected.
.date-picker-calendar button.today: Styles the current date with a blue border. This helps users quickly identify the current date within the calendar.
.date-picker-calendar button:hover: Provides a subtle hover effect by changing the background color to a light gray. This gives users visual feedback when they interact with the day buttons.

This CSS provides a clean and functional look for our date picker. Of course, you can customize these styles further to match your specific design requirements. Experiment with different colors, fonts, and layouts to create a date picker that perfectly fits your website's aesthetic. With the styling in place, let's move on to the most dynamic part: the JavaScript logic.

Implementing the JavaScript Logic

Now comes the exciting part: adding the JavaScript that will make our date picker interactive and functional. We'll need to handle month navigation, date selection, and dynamically generating the calendar grid. Let's start by outlining the main tasks:

Get references to the DOM elements: We'll need to grab the elements we created in the HTML, such as the month display, navigation buttons, and calendar grid.
Initialize the current date: We'll start by displaying the current month and year when the date picker loads.
Generate the calendar grid: This involves calculating the days in the current month, the starting day of the week, and creating the appropriate number of day buttons.
Handle month navigation: We'll add event listeners to the navigation buttons to move between months and update the calendar accordingly.
Handle date selection: When a user clicks on a day button, we'll need to update the selected date and potentially trigger a callback function.

Here’s a JavaScript code snippet that accomplishes these tasks:

const datePicker = document.querySelector('.date-picker');
const currentMonthDisplay = datePicker.querySelector('.date-picker-current-month');
const prevMonthButton = datePicker.querySelector('.date-picker-prev-month');
const nextMonthButton = datePicker.querySelector('.date-picker-next-month');
const calendarBody = datePicker.querySelector('.date-picker-calendar');

let currentDate = new Date();
let selectedDate = null;

function renderCalendar() {
  const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
  const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 (Sun) - 6 (Sat)

  currentMonthDisplay.textContent = currentDate.toLocaleDateString('default', { month: 'long', year: 'numeric' });
  calendarBody.innerHTML = '';

  let dayCounter = 1;
  for (let i = 0; i < 6; i++) { // Up to 6 weeks in a month
    const weekRow = document.createElement('div');
    weekRow.classList.add('date-picker-week');

    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < startingDayOfWeek) {
        const emptyCell = document.createElement('button');
        emptyCell.disabled = true;
        weekRow.appendChild(emptyCell);
      } else if (dayCounter <= daysInMonth) {
        const dayButton = document.createElement('button');
        dayButton.textContent = dayCounter;
        dayButton.dataset.day = dayCounter;
        dayButton.addEventListener('click', selectDate);

        if (currentDate.getFullYear() === new Date().getFullYear() &&
            currentDate.getMonth() === new Date().getMonth() &&
            dayCounter === new Date().getDate()) {
          dayButton.classList.add('today');
        }

        if (selectedDate &&
            currentDate.getFullYear() === selectedDate.getFullYear() &&
            currentDate.getMonth() === selectedDate.getMonth() &&
            dayCounter === selectedDate.getDate()) {
          dayButton.classList.add('selected');
        }

        weekRow.appendChild(dayButton);
        dayCounter++;
      }
    }

    calendarBody.appendChild(weekRow);
  }
}

function selectDate(event) {
  const day = parseInt(event.target.dataset.day);
  selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);

  // Remove previous selection
  const previouslySelected = calendarBody.querySelector('.selected');
  if (previouslySelected) {
    previouslySelected.classList.remove('selected');
  }

  // Add 'selected' class to the clicked day
  event.target.classList.add('selected');
  
  // You can add a callback function here to handle the selected date
  console.log('Selected date:', selectedDate);
}

function navigateMonths(offset) {
  currentDate.setMonth(currentDate.getMonth() + offset);
  renderCalendar();
}

prevMonthButton.addEventListener('click', () => navigateMonths(-1));
nextMonthButton.addEventListener('click', () => navigateMonths(1));

renderCalendar(); // Initial render

Let’s break down this JavaScript code:

DOM Element References: The first few lines select the necessary HTML elements using document.querySelector. These references are stored in variables for easy access later.
currentDate and selectedDate: These variables store the currently displayed date and the selected date, respectively. currentDate is initialized to the current date, and selectedDate is initially null.
renderCalendar() Function: This function is the heart of our date picker. It generates the calendar grid based on the currentDate. Let's look at its steps:
- Calculate Dates: It calculates the first day of the month, the last day of the month, the number of days in the month, and the starting day of the week (0 for Sunday, 1 for Monday, etc.).
- Update Month Display: It updates the currentMonthDisplay with the current month and year using toLocaleDateString for formatting.
- Clear Calendar Body: It clears the existing calendar grid by setting calendarBody.innerHTML = ''.
- Generate Day Cells: It uses nested loops to create the calendar grid. The outer loop iterates through the weeks (up to 6 weeks in a month), and the inner loop iterates through the days of the week (Sunday to Saturday).
  - Empty Cells: For days before the first day of the month, it creates disabled buttons to fill the empty cells at the beginning of the grid.
  - Day Buttons: For each day in the month, it creates a button with the day number as its text content. It also sets a data-day attribute to store the day number and adds a click event listener that calls the selectDate function.
  - Today Highlight: If the current day is the current date, it adds the today class to the button for styling.
  - Selected Date Highlight: If a date is selected and it matches the current day, it adds the selected class to the button.
- Append to Calendar: Each day button is appended to a week row, and each week row is appended to the calendarBody.
selectDate(event) Function: This function is called when a day button is clicked. It parses the day number from the button's data-day attribute, creates a new Date object for the selected date, and updates the selectedDate variable.
- Remove Previous Selection: It removes the selected class from the previously selected button, if any.
- Add 'selected' Class: It adds the selected class to the clicked button.
- Callback Function (Optional): You can add a callback function here to handle the selected date, such as updating an input field or triggering other actions. The example code logs the selected date to the console.
navigateMonths(offset) Function: This function is called when the previous or next month button is clicked. It updates the currentDate by adding the specified offset (e.g., -1 for previous month, 1 for next month) and then calls renderCalendar() to regenerate the calendar grid.
Event Listeners: Event listeners are added to the previous and next month buttons to call the navigateMonths function when clicked.
Initial Render: Finally, renderCalendar() is called to initially render the calendar when the page loads.

This JavaScript code provides the core functionality for our date picker. It dynamically generates the calendar grid, handles month navigation, and allows users to select dates. Remember, this is just the foundation. You can expand this code to add more features, such as date range selection, disabled dates, and custom date formats.

Enhancing Accessibility

Accessibility is a crucial aspect of web development, and our date picker should be usable by everyone, including users with disabilities. Here are some key considerations for making our date picker accessible:

Keyboard Navigation: Ensure that users can navigate the date picker using the keyboard. This includes using the Tab key to focus on different elements and the arrow keys to navigate between days, months, and years.
ARIA Attributes: Use ARIA (Accessible Rich Internet Applications) attributes to provide semantic information about the date picker's structure and functionality. This helps assistive technologies like screen readers understand the component.
Contrast: Ensure sufficient color contrast between text and background colors to make the date picker usable for users with visual impairments.
Focus Indicators: Provide clear visual indicators when an element has focus, making it easy for keyboard users to see where they are on the page.

Here are some specific ARIA attributes we can use in our date picker:

aria-label: Provides a descriptive label for elements like the navigation buttons.
aria-live: Indicates that a section of the page will be updated dynamically, such as when the month changes.
aria-disabled: Indicates that an element is disabled, such as the empty day cells at the beginning of the month.
`role=