How do you swap/change positions of year and month?

[nurbek-mirai]

I want to change the order of month and year any help would be appreciated.

[gpbl]

@nurbek-mirai sure this is react-day-picker package? In DayPicker, you can change the format of the month caption via the formatters prop:

<DayPicker formatters={{ 
     formatMonthCaption: (date) => format(date, 'LLLL'); // return your formatted year + month
  }} 
/>

[nurbek-mirai]

Hey @gpbl thanks for the swift reply, Yep this is indeed react-day-picker package I'm using shadcn/ui.
I guess that formatters kind of works in this situation, sure it doesn't physically change the order of the captions but rather just force formats it on top like in monthCaption I format it as year and vice versa, and it kind of worked but I have another problem when the captions are dropdown the children are wrong.

As you can see in the image due to force formatting caption to my desired format items in the dropdown doesn't show up correctly
below is the code I use.

      ...
      formatters={{
       formatCaption: date => format(date, 'yyyy-MMMM'),
       formatMonthCaption: date => format(date, 'yyyy'),
       formatYearCaption: date => format(date, 'MM'),
     }}
     components={{
       Dropdown: ({ value, onChange, children }: DropdownProps) => {
         const options = React.Children.toArray(children) as React.ReactElement<React.HTMLProps<HTMLOptionElement>>[]
         const selected = options.find(child => child.props.value === value)
         const handleChange = (value: string) => {
           const changeEvent = {
             target: { value },
           } as React.ChangeEvent<HTMLSelectElement>
           onChange?.(changeEvent)
         }
         return (
           <Select
             value={value?.toString()}
             onValueChange={value => {
               handleChange(value)
             }}
           >
             <SelectTrigger className='pr-1.5'>
               <SelectValue>{selected?.props?.children}</SelectValue>
             </SelectTrigger>
             <SelectContent position='popper'>
               <ScrollArea className='h-80'>
                 {options.map((option, id: number) => (
                   <SelectItem
                     value={option.props.value?.toString() ?? ''}
                     key={`${option.props.value?.toString()}-${id}`}
                   >
                     {option.props.children}
                   </SelectItem>
                 ))}
               </ScrollArea>
             </SelectContent>
           </Select>
         )
       },
       IconLeft: () => <ChevronLeft className='h-4 w-4' />,
       IconRight: () => <ChevronRight className='h-4 w-4' />,
     }}
     ...