so I created a a popover input field for my project, the other inputs are working properly but when I tried to use CalendarPicker
from shadcn, the opacity of calendar becomes zero wherein the background of the calendar is transparent. I tried copying directly from shadcn docs but its just the same.
<code>
const CreateTransactionDialog = ({ trigger, type }: Props) => {
return (
<Dialog>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<Form {...form}>
<form className="space-y-4">
.../other input fields
<div className="flex items-center justify-between gap-2">
<FormField
control={form.control}
name="date"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Transaction</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto opacity-100 p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
Transaction Date
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
)
}
export default CreateTransactionDialog
</code>
<code>
const CreateTransactionDialog = ({ trigger, type }: Props) => {
return (
<Dialog>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<Form {...form}>
<form className="space-y-4">
.../other input fields
<div className="flex items-center justify-between gap-2">
<FormField
control={form.control}
name="date"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Transaction</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto opacity-100 p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
Transaction Date
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
)
}
export default CreateTransactionDialog
</code>
const CreateTransactionDialog = ({ trigger, type }: Props) => {
return (
<Dialog>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<Form {...form}>
<form className="space-y-4">
.../other input fields
<div className="flex items-center justify-between gap-2">
<FormField
control={form.control}
name="date"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Transaction</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto opacity-100 p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
Transaction Date
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
)
}
export default CreateTransactionDialog