Saasflare UI
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.json
pnpm add @saasflare/ui

Usage

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

On this page