Components
Date Picker
Controlled/uncontrolled single-date input — Button + Popover + single-mode Calendar.
Installation
npx shadcn@latest add https://ui.saasflare.io/r/date-picker.jsonpnpm add @saasflare/uiUsage
Loading…
"use client"import { useState } from "react"import { DatePicker, Label } from "@saasflare/ui"/** A controlled single-date picker in a popover. */export function Demo() { const [date, setDate] = useState<Date | undefined>() return ( <div className="flex flex-col gap-2 w-full max-w-sm"> <Label>Trial ends on</Label> <DatePicker value={date} onChange={setDate} /> </div> )}Bounded
Loading…
"use client"import { useState } from "react"import { DatePicker, Label } from "@saasflare/ui"/** A date picker restricted to a minimum date. */export function Demo() { const [date, setDate] = useState<Date | undefined>() return ( <div className="flex flex-col gap-2 w-full max-w-sm"> <Label>Schedule report</Label> <DatePicker value={date} onChange={setDate} minDate={new Date()} placeholder="Pick a future date" /> </div> )}API Reference
Prop
Type