Date

Date picker with calendar and keyboard navigation.

import React from 'react'
import { Date } from "ui-lab-components"
 
export function Example() {
  const [date, setDate] = React.useState<Date | null>(null)
  return <Date value={date} onChange={setDate} />
}

Basic Date

A simple date component for date selection with today indicator and week numbers. Click a date to select it.

import React from 'react'
import { Date as DatePicker } from 'ui-lab-components'
 
export const metadata = {
  title: 'Basic Date',
  description: 'A simple date component for date selection with today indicator and week numbers. Click a date to select it.'
}
 
export default function Example() {
  const [date, setDate] = React.useState<Date | null>(null)
  return <DatePicker value={date} onChange={setDate} />
}

Date with Disabled Dates

Date component with certain dates disabled (weekends). Disabled dates cannot be selected.

import React from 'react'
import { Date as DatePicker } from 'ui-lab-components'
 
export const metadata = {
  title: 'Date with Disabled Dates',
  description: 'Date component with certain dates disabled (weekends). Disabled dates cannot be selected.'
}
 
export default function Example() {
  const [date, setDate] = React.useState<Date | null>(null)
 
  const isDisabled = React.useCallback(
    (dateToCompare: Date) => {
      const day = dateToCompare.getDay()
      return day === 0 || day === 6 // Disable weekends only
    },
    []
  )
 
  return <DatePicker value={date} onChange={setDate} disabled={isDisabled} />
}

Controlled Mode

Date picker with controlled value and external state management.

Selected: No date selected
import React from 'react'
import { Date as DatePicker, Button, Flex } from 'ui-lab-components'
 
export const metadata = {
  title: 'Controlled Mode',
  description: 'Date picker with controlled value and external state management. Includes a "Today" button to programmatically set the current date.'
}
 
export default function Example() {
  const [date, setDate] = React.useState<Date | null>(null)
 
  const handleSetToday = () => {
    setDate(new Date())
  }
 
  const handleClear = () => {
    setDate(null)
  }
 
  const formatDate = (d: Date | null) => {
    if (!d) return 'No date selected'
    return d.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }
 
  return (
    <Flex direction="column" gap="md">
      <Flex gap="sm">
        <Button variant="primary" onClick={handleSetToday}>
          Today
        </Button>
        <Button variant="outline" onClick={handleClear}>
          Clear
        </Button>
      </Flex>
      <div className="text-sm text-foreground-400">
        Selected: {formatDate(date)}
      </div>
      <DatePicker value={date} onChange={setDate} />
    </Flex>
  )
}

Date Range Selection

Two date pickers for selecting start and end dates. Useful for booking, event scheduling, or filtering data by date range.

Check-in Date
Check-out Date
Selected Range
Select date → Select date
import React from 'react'
import { Date as DatePicker, Flex } from 'ui-lab-components'
 
export const metadata = {
  title: 'Date Range Selection',
  description: 'Two date pickers for selecting start and end dates. Useful for booking, event scheduling, or filtering data by date range. The start date is locked once selected until both dates are set.'
}
 
export default function Example() {
  const [startDate, setStartDate] = React.useState<Date | null>(null)
  const [endDate, setEndDate] = React.useState<Date | null>(null)
 
  const handleStartDateChange = (date: Date) => {
    setStartDate(date)
    // Reset end date if it's before the new start date
    if (endDate && date > endDate) {
      setEndDate(null)
    }
  }
 
  const handleEndDateChange = (date: Date) => {
    if (startDate && date >= startDate) {
      setEndDate(date)
    }
  }
 
  const formatDate = (date: Date | null) => {
    if (!date) return 'Select date'
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric'
    })
  }
 
  const daysDifference = startDate && endDate
    ? Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
    : null
 
  const isEndDateDisabled = (date: Date) => {
    return !startDate || date < startDate
  }
 
  return (
    <Flex direction="column" gap="lg">
      <Flex direction="column" gap="md">
        <div>
          <div className="text-sm font-medium text-foreground-400 mb-2">
            Check-in Date
          </div>
          <DatePicker value={startDate} onChange={handleStartDateChange} />
        </div>
 
        <div>
          <div className="text-sm font-medium text-foreground-400 mb-2">
            Check-out Date
          </div>
          <DatePicker
            value={endDate}
            onChange={handleEndDateChange}
            disabled={isEndDateDisabled}
          />
        </div>
      </Flex>
 
      {/* Range summary */}
      <div className="p-3 bg-background-300 rounded-md">
        <div className="text-sm text-foreground-400 mb-1">
          Selected Range
        </div>
        <div className="text-foreground-400 font-medium">
          {formatDate(startDate)} → {formatDate(endDate)}
        </div>
        {daysDifference !== null && (
          <div className="text-sm text-foreground-400 mt-2">
            Duration: {daysDifference} {daysDifference === 1 ? 'day' : 'days'}
          </div>
        )}
      </div>
    </Flex>
  )
}
UI Lab