Sort objects by a date field in date-fns

How it works

1. Store dates on objects. Each task has a name and a due field that holds a native Date. [1]
2. Compare the date field. The sort callback (a, b) => compareAsc(a.due, b.due) passes the two due dates to compareAsc. The tasks are printed earliest due date first. [1]
3. Print each task. Each line shows the formatted due date and the task name. format builds the yyyy-MM-dd text. [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 { compareAsc, format } from "date-fns";

const tasks = [
  { name: "Write report", due: new Date(2024, 5, 14) },
  { name: "Book flights", due: new Date(2024, 4, 2) },
  { name: "Renew passport", due: new Date(2024, 3, 28) },
  { name: "Team review", due: new Date(2024, 5, 3) },
];

const byDue = [...tasks].sort((a, b) => compareAsc(a.due, b.due));

console.log("Tasks by due date:");
for (const t of byDue) {
  console.log(`  ${format(t.due, "yyyy-MM-dd")}  ${t.name}`);
}

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.

Rename the due field or add tasks to try it with your own data. 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

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