Date Picker

Component date picker để chọn ngày đơn với calendar dropdown.

Cài đặt

npm

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

pnpm

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

yarn

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

bun

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

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add date-picker

Dependencies

Component này tự động cài đặt các dependencies sau:

• React: react-day-picker, date-fns
• Vue: radix-vue, vue-datepicker
• Angular: @radix-ng/primitives, date-fns
• React Native: Không khả dụng (sử dụng date-time-picker)
• Flutter: Không khả dụng (sử dụng DatePicker có sẵn)

Không cần cài đặt thủ công!

Sử dụng

Ví dụ cơ bản

React

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

export default function DatePickerDemo() {
  return <DatePicker placeholder="Chọn ngày" />
}

Vue

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

<template>
  <DatePicker placeholder="Chọn ngày" />
</template>

Với Form

React

import { useForm } from "react-hook-form"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { DatePicker } from "@/components/ui/date-picker"
import { Button } from "@/components/ui/button"

export default function DatePickerForm() {
  const form = useForm({
    defaultValues: {
      date: undefined,
    },
  })

  function onSubmit(values: { date: Date }) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="date"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Ngày sinh</FormLabel>
              <FormControl>
                <DatePicker {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Gửi</Button>
      </form>
    </Form>
  )
}

API Reference

Props

Prop	Type	Default	Description	Framework Support
date	Date	undefined	Ngày đã chọn	Tất cả
defaultDate	Date	undefined	Ngày mặc định	Tất cả
placeholder	string	'Chọn ngày'	Văn bản giữ chỗ	Tất cả
disabled	boolean	false	Vô hiệu picker	Tất cả
minDate	Date	undefined	Ngày tối thiểu	Tất cả
maxDate	Date	undefined	Ngày tối đa	Tất cả
className / class	string	''	Tên class CSS	Tất cả

Accessibility

• Keyboard Navigation: Phím mũi tên để điều hướng calendar, Enter để chọn
• Screen Reader: Sử dụng ARIA labels và live regions phù hợp
• Focus Management: Focus trap trong calendar dropdown
• WCAG Compliance: Tuân thủ WCAG 2.1 Level AA

Author

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

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

License

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