Date Picker

Stable

Unified popover date field combining an accessible formatted text input trigger with an interactive Cyber Calendar overlay.

Installation

$pnpm add @siberui/react

Import

tsx

import { DatePicker } from '@siberui/react';

Basic Usage & Controlled Date State

DatePicker renders a trigger button with human-readable date formatting that reveals an anchored calendar popover upon click.

DEPLOYMENT EPOCH

Select target deployment timeline.

tsx

const [date, setDate] = React.useState<Date | undefined>(new Date());

<DatePicker
  label="DEPLOYMENT EPOCH"
  value={date}
  onChange={setDate}
  helperText="Select target deployment timeline."
/>

Neon Cybernetic Date Picker

Pass variant="neon" to apply cyan laser wire outlines, monospace font rendering, and coordinated calendar popover styles.

ORBITAL_WINDOW_TIMESTAMP

Synchronized to UTC clock.

tsx

<DatePicker
  variant="neon"
  label="ORBITAL_WINDOW_TIMESTAMP"
  value={neonDate}
  onChange={setNeonDate}
  helperText="Synchronized to UTC clock."
/>

Validation States (Error & Success)

Communicate field validity with error or success props.

MAINTENANCE EPOCHBlackout window conflict

VERIFIED TIME SLOT

Telemetry window confirmed.

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-xl">
  <DatePicker
    label="MAINTENANCE EPOCH"
    error="Blackout window conflict"
    value={date}
  />
  <DatePicker
    label="VERIFIED TIME SLOT"
    success
    value={date}
    helperText="Telemetry window confirmed."
  />
</div>

Size Spectrum (Small, Medium, Large)

Match surrounding form inputs with inputSize="sm" | "md" | "lg".

SMALL (SM)

MEDIUM (MD)

LARGE (LG)

tsx

<div className="space-y-4 w-full max-w-sm">
  <DatePicker inputSize="sm" label="SMALL (SM)" />
  <DatePicker inputSize="md" label="MEDIUM (MD)" />
  <DatePicker inputSize="lg" label="LARGE (LG)" />
</div>

Frosted Cyber-Glass Epoch Input

Composite date picker layered over circuit textures with perimeter laser sweeps.

SATELLITE INGEST EPOCH

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <DatePicker
    variant="glass"
    label="SATELLITE INGEST EPOCH"
    value={glassDate}
    onChange={setGlassDate}
  />
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Mission Launch Epoch Card

Composite mission defense card with integrated date input.

LAUNCH SCHEDULE MATRIX

ARMED

Configure zero-day mission countdown start date.

COUNTDOWN START DATE

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">LAUNCH SCHEDULE MATRIX</CardTitle>
      <Badge variant="neon" size="sm">ARMED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Configure zero-day mission countdown start date.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <DatePicker
      variant="neon"
      label="COUNTDOWN START DATE"
      value={neonDate}
      onChange={setNeonDate}
    />
    <Button variant="neon" glow className="w-full">
      LOCK MISSION SCHEDULE
    </Button>
  </CardContent>
</Card>

API Reference

PROPERTIES (8)← swipe to inspect →

Property	Description	Type	Default
value	Controlled Date object.	Date	-
onChange	Callback fired when date is selected in the popover calendar.	(date?: Date) => void	-
variant	Visual theme for both input trigger and calendar popover.	"default" \| "neon" \| "glass"	"default"
inputSize	Height and typography size of the trigger button.	"sm" \| "md" \| "lg"	"md"
label	Uppercase label rendered above the date picker trigger.	string	-
helperText	Sub-label helper caption rendered beneath the trigger.	string	-
error	Error state boolean or error message string.	string \| boolean	-
success	Success validation state boolean.	boolean	-

Accessibility

HTML Label Linking: When label is supplied, it is automatically associated with the trigger button via htmlFor and unique identifier generation.

Best Practices

Form Consistency: Use the same inputSize as surrounding text inputs for aligned form rows.