Sort dates newest first in date-fns

How it works

1. Start with native dates. The array holds plain Date objects. No wrapper type is needed. [1]
2. Swap the arguments. The sort callback is (a, b) => compareAsc(b, a). Passing b first prints the list newest first, while plain compareAsc gives the ascending order shown in the README. [1]
3. Print both orders. The code prints the ascending and descending lists side by side. Each date is shown with format(d, "yyyy-MM-dd"). [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 show = (list) => list.map((d) => format(d, "yyyy-MM-dd")).join(", ");

const dates = [
  new Date(2023, 4, 20),
  new Date(2021, 0, 1),
  new Date(2024, 9, 15),
  new Date(2022, 6, 4),
];

const ascending = [...dates].sort(compareAsc);
// Swap the arguments for newest first
const descending = [...dates].sort((a, b) => compareAsc(b, a));

console.log("Oldest first:", show(ascending));
console.log("Newest first:", show(descending));

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.

Both lines come from the same array, sorted with different callbacks. 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 Group dates by day in date-fns