Group dates by day in date-fns

How it works

1. Events with times. Each event is a Date that includes hours and minutes. Several events fall on the same day. [1]
2. Build a day key. format(d, "yyyy-MM-dd") turns each event into a day string. The code uses that string as a key in a plain object and counts the events. [1]
3. Print the groups. The loop prints each day with its event count. The keys print in the order they were first seen in the array. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { format } from "date-fns";

// new Date(year, monthIndex, day, hours, minutes)
const events = [
  new Date(2024, 2, 4, 9, 30),
  new Date(2024, 2, 4, 14, 5),
  new Date(2024, 2, 5, 8, 0),
  new Date(2024, 2, 4, 18, 45),
  new Date(2024, 2, 6, 11, 15),
  new Date(2024, 2, 5, 16, 20),
];

const perDay = {};
for (const e of events) {
  const day = format(e, "yyyy-MM-dd");
  perDay[day] = (perDay[day] || 0) + 1;
}

for (const [day, count] of Object.entries(perDay)) {
  console.log(`${day}: ${count} event(s)`);
}

Run ▶ResetCopyShareCtrl/⌘ + Enter runs

▶ Run the live exampleLoads date-fns from esm.sh after you press Run.

✦ Change it with AI

Change

Free for signed-in members, with a daily limit. Describe the change in plain words; the new code runs only in your browser.

Add events with different hours on the same day and watch that day's count grow. Code written by AgentGid [1].

Checked Oct 14, 2026: it starts without errors in Chromium with date-fns 4.4.0. Needs WebGL.

More date-fns examples

Sort objects by a date field in date-fns Format a date as yyyy-MM-dd in date-fns Sort dates oldest first in date-fns Sort dates newest first in date-fns