Date Time Picker

A date and time picker component for selecting both date and time values.

Installation

npm

npx @galaxy-stack/nebula-cli@latest add date-time-picker

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add date-time-picker

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add date-time-picker

bun

bunx @galaxy-stack/nebula-cli@latest add date-time-picker

global

# If you have installed galaxy-design globally
galaxy-design add date-time-picker

Dependencies

This component automatically installs the following dependencies:

• React: react-day-picker, date-fns
• Vue: radix-vue, vue-datepicker
• Angular: @radix-ng/primitives, date-fns
• React Native: Not available (use native picker)
• Flutter: Not available (use built-in DateTimePicker)

No manual installation needed!

Usage

Basic Example

React

import { DateTimePicker } from "@/components/ui/date-time-picker"

export default function DateTimePickerDemo() {
  return <DateTimePicker placeholder="Pick date and time" />
}

Vue

<script setup lang="ts">
import { DateTimePicker } from '@/components/ui/date-time-picker'
</script>

<template>
  <DateTimePicker placeholder="Pick date and time" />
</template>

With Min/Max

React

import { DateTimePicker } from "@/components/ui/date-time-picker"

export default function DateTimePickerWithLimits() {
  const minDate = new Date()
  const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)

  return (
    <DateTimePicker
      placeholder="Pick date and time"
      minDate={minDate}
      maxDate={maxDate}
    />
  )
}

API Reference

Props

Prop	Type	Default	Description	Framework Support
dateTime	Date	undefined	Selected date and time	All
defaultDateTime	Date	undefined	Default selected value	All
placeholder	string	'Pick date and time'	Placeholder text	All
disabled	boolean	false	Disable the picker	All
minDate	Date	undefined	Minimum selectable date	All
maxDate	Date	undefined	Maximum selectable date	All
showTime	boolean	true	Show time selector	All
timeFormat	`'12h'	'24h'`	'24h'	Time format
className / class	string	''	CSS class names	All

Accessibility

• Keyboard Navigation: Arrow keys to navigate, Enter to select
• Screen Reader: Uses proper ARIA labels and live regions
• Focus Management: Focus trap in dropdown
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)