DateTime

Overview

The DateTime component provides a flexible and accessible date and time selection interface. It's designed to handle both single date selection and date range picking with optional time input, making it perfect for filtering, scheduling, and data analysis use cases.

Usage

import { Button, DateTime, Range, TimeUnit } from "@unkey/ui";
 
export default function MyComponent() {
  const handleDateTimeChange = (date?: Range, startTime?: TimeUnit, endTime?: TimeUnit) => {
    // Handle date and time changes
  };
 
  return (
    <DateTime onChange={handleDateTimeChange}>
      <DateTime.Calendar mode="range" />
      <DateTime.TimeInput type="range" />
      <DateTime.Actions>
        <Button variant="primary">Apply</Button>
      </DateTime.Actions>
    </DateTime>
  );
}

Examples

Basic Usage

A comprehensive example showing date range selection with time input and apply functionality.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<Row>
  <div className="flex flex-col w-full">
    <div className="w-full p-4 border border-1-gray-12 h-32">
      <div className="w-full ">
        <p className="m-0 p-0">
          Date Range:{' '}
          <span>
            no date
          </span>
          {' '}-{' '}
          <span>
            no date
          </span>
        </p>
        <p className="m-0 p-0">
          Time Span:{' '}
          <span>
            undefined:undefined:undefined
          </span>
          {' '}-{' '}
          <span>
            undefined:undefined:undefined
          </span>
        </p>
      </div>
    </div>
    <div className="flex flex-col w-80 mx-auto pt-12 justify-center items-center">
      <DateTime.root onChange={onChange}>
        <AnonymousComponent mode="range" />
        <DateTime.TimeInput type="range" />
        <DateTime.Actions className="px-2">
          <Button
            className="w-full"
            onClick={onClick}
            variant="primary"
          >
            Apply Filter
          </Button>
        </DateTime.Actions>
      </DateTime.root>
    </div>
  </div>
</Row>

Features

• Date Range Selection: Support for both single date and date range picking
• Time Input: Precise time selection with hours, minutes, and seconds
• Accessibility: Built-in keyboard navigation and screen reader support
• Responsive: Adapts to different screen sizes and orientations
• Customizable: Extensive styling and configuration options
• Date Constraints: Min/max date validation and disabled date ranges
• Context Management: Internal state management with external change callbacks

Props

Calendar Props

TimeInput Props

Actions Props

Structure

The DateTime component is composed of several sub-components that work together:

1. DateTime - The main container component that provides context
2. DateTime.Calendar - Calendar component for date selection
3. DateTime.TimeInput - Time input component for precise time selection
4. DateTime.Actions - Container for action buttons

Styling

The component includes default styling with:

• Consistent spacing and typography
• Dark mode support
• Responsive design
• Customizable through className props
• Focus states for accessibility

Custom Styling

You can customize the appearance using className props:

<DateTime className="custom-container">
  <DateTime.Calendar 
    className="custom-calendar"
    classNames={{
      day_selected: "bg-blue-500 text-white",
      day_today: "bg-gray-100"
    }}
  />
  <DateTime.TimeInput className="custom-time-input" />
  <DateTime.Actions className="custom-actions">
    <Button>Custom Button</Button>
  </DateTime.Actions>
</DateTime>

Accessibility

The DateTime component is built with accessibility in mind:

• Keyboard Navigation: Full keyboard support for all interactions
• Screen Reader Support: Proper ARIA labels and announcements
• Focus Management: Clear focus indicators and logical tab order
• High Contrast: Maintains proper contrast ratios
• Semantic HTML: Uses appropriate HTML elements and roles
• Date Format: Supports various date formats and localization