Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

DATE PICKER

PreviousChips
DialogsNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: checkout pickup — real DatePicker + time chips

Store pickup

Choose a date and time to collect your order.

Pickup location
Downtown flagship · 1.2 km
Pickup date
Mar2025
S
M
T
W
T
F
S
Time slot
10:00–12:00
14:00–16:00
16:00–18:00
  • Selecting a single date (birthdays, deadlines, event dates)
  • Selecting a date range (booking periods, report filters)
  • When you need to constrain selectable dates (min/max boundaries)

Usage Guidelines

DO

Use single mode for one-off date selection, range mode for start/end pairs. Pre-populate with a sensible default month (e.g. current month or the month of an existing value)

Don’t

Don't use DatePicker for time-only selection. Always provide minDate/maxDate when the valid range is known

Accessibility

  • Navigation buttons include aria-label for screen readers
  • Date cells have aria-label (full date string) and aria-pressed (selected state)
  • Disabled dates use the native disabled attribute — excluded from tab order
  • Full keyboard navigation supported via browser-native button focus