COMPONENTS / DATA ENTRY

Date pickers

Pick a single date or a start and end date from the keyboard or calendar.

approvedv1.0.0verifiedFigma not linked

Standards Figma mapping

Live previewUpdated 2026-10-09 · CSC Design System

Appointment date

October 2026

SuMoTuWeThFrSa

No date selected

Design variations

Single date

Date range

Implementation

// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { DateField } from '@csc/ui';

export function Example() {
  return (
    <DateField variant="single" />
  );
}

Agent prompt

Copy a prompt for this component from the AI Development Hub.

When to use it

Pick a single date or a start and end date from the keyboard or calendar.

Dependencies: None beyond React. Source: packages/ui/src/date-field.tsx. 1.0.0 — Single date and date range.