<Popover open={openPopover} onOpenChange={setOpenPopover}>
<PopoverTrigger asChild>
<Button variant='outline' id='date' className='w-48 justify-between font-normal bg-accent'>
{formData.date ? formData.date.toLocaleDateString() : 'Select date'}
<ChevronDownIcon />
</Button>
</PopoverTrigger>
<PopoverContent className='w-auto overflow-hidden p-0' align='start'>
<Calendar
mode='single'
selected={formData.date}
disabled={date => date > new Date() || date < new Date('1900-01-01')}
month={month}
onMonthChange={setMonth}
captionLayout='dropdown'
onSelect={date => {
if (date) {
setMonth(date)
setAge(getAge(date.toISOString()))
setFieldValue('date', date)
}
setOpenPopover(false)
}}
/>
</PopoverContent>
</Popover>
<Popover open={openPopover} onOpenChange={setOpenPopover}>
<PopoverTrigger asChild>
<Button variant='outline' id='date' className='w-48 justify-between font-normal bg-accent'>
{formData.date ? formData.date.toLocaleDateString() : 'Select date'}
<ChevronDownIcon />
</Button>
</PopoverTrigger>
<PopoverContent className='w-auto overflow-hidden p-0' align='start'>
<Calendar
mode='single'
selected={formData.date}
disabled={date => date > new Date() || date < new Date('1900-01-01')}
month={month}
onMonthChange={setMonth}
captionLayout='dropdown'
onSelect={date => {
if (date) {
setMonth(date)
setAge(getAge(date.toISOString()))
setFieldValue('date', date)
}
setOpenPopover(false)
}}
/>
</PopoverContent>
</Popover>