CaptionLayout dropdown descending

[joshuarost]

How can I change the sort direction for the year dropdown to descending so the current year is the first entry?

[gpbl]

Interesting case @joshuarost !

You could use a custom Select component and reverse its options when rendering the years dropdown. Check the aria-label to know if the component is used to display the years.

https://codesandbox.io/p/sandbox/ph4pvd

function SelectWithReversedYears(
  props: SelectHTMLAttributes<HTMLSelectElement>
) {
  if (props["aria-label"] === "Choose the Year") {
    return (
      <Select {...props}>
        {/* Reverse the select options */}
        {React.Children.toArray(props.children).reverse()}
      </Select>
    );
  }
  return <Select {...props} />;
}

export default function App() {
  return (
    <DayPicker
      captionLayout="dropdown"
      components={{
        Select: SelectWithReversedYears,
      }}
    />
  );
}

Screenshot:

[joshuarost]

Perfect. Thanks for the fast answer.

[gpbl]

We may want to add this behavior as a prop. Tracked in #2819

Thanks for your suggestion!

[gpbl]

@joshuarost we just released v9.9.0, which includes a reverseYears prop that does exactly this. No need to use a custom component anymore!

<DayPicker captionLayout="dropdown" reverseYears />

See it in action in the playground:

[joshuarost]

Wow! Super fast. Thank you very much.