select date custom comp

pjdev2d — Mon, 04 May 2026 13:40:47 +0000

import { useState, useEffect, useRef } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "../ui/button";
import { Calendar } from "../ui/calendar";
import moment from "moment";
import { cn } from "@/lib/utils";
import { CalendarDays } from "lucide-react";

export const SelectDate = ({
selected,
className,
onSelect,
disabled,
disableClick,
placeholder = "Select a date",
autoFocus,
}: {
selected?: any;
className?: string;
onSelect: (date: string | undefined) => void;
disabled?: any;
placeholder?: string;
disableClick?: boolean;
autoFocus?: boolean;
}) => {
const [open, setOpen] = useState(false);
const buttonRef = useRef(null);

useEffect(() => {
if (autoFocus && buttonRef.current && !disableClick) {
const timer = setTimeout(() => {
buttonRef.current?.focus();
}, 150);
return () => clearTimeout(timer);
}
}, [autoFocus, disableClick]);

return (

ref={buttonRef}
disabled={disableClick}
className={cn(
"hover:bg-custom-gray-bg-1 focus:border-custom-blue-border-1! w-full justify-between text-left font-medium bg-custom-gray-bg-1 border border-custom-gray-border-1 outline-none focus:ring-2 cursor-pointer focus:ring-custom-blue-focusring! text-custom-gray-text-1 transition-all placeholder:text-custom-gray-text-1 ",
{
"text-custom-gray-text-1": !selected,
},
className,
)}
>
{selected ? moment(selected).format("DD/MM/YYYY") : placeholder}

className="pointer-events-auto z-10000 w-auto overflow-hidden p-0"
align="start"
>
mode="single"
selected={selected ? new Date(selected) : undefined}
onSelect={(date) => {
onSelect(date ? moment(date).format("YYYY-MM-DD") : undefined);
setOpen(false);
}}
disabled={disabled}
captionLayout="dropdown"
startMonth={new Date(1900, 0)}
endMonth={new Date(new Date().getFullYear() + 10, 11)}
/>

);
};

select input - variations

pjdev2d — Mon, 04 May 2026 13:39:42 +0000

Liquid syntax error: Variable '{{% raw %}' was not properly terminated with regexp: /\}\}/

hi

pjdev2d — Fri, 01 May 2026 05:34:20 +0000

fbgbfgb

DEV Community: pjdev2d

select date custom comp

select input - variations

hi