Date Picker Component

A flexible date picker component with multiple variants and animations.

Installation

pnpm → pnpm dlx pacmanui add datepicker
npm  → npx pacmanui add datepicker

API Reference

PROPTYPEDEFAULTDESCRIPTION
selectedDateDate | nullnullThe currently selected date
onChange(date: Date) => voidrequiredCallback function when a date is selected
variantstring'default'Visual style variant: 'default', 'minimal', 'gradient', 'neumorphic', 'dark', 'playful', 'material', 'ios'
animationstring'fade'Animation style: 'fade', 'slide', 'scale', 'rotate', 'none'
classNamestring' 'Additional CSS classes to apply

Examples

Basic Date Picker

A simple date picker with default styling

'use client'

import { DatePicker } from '@/components/pacmanui/date-picker'
import { useState } from 'react'

export default function BasicExample() {
  const [date, setDate] = useState<Date | null>(null)
  
  return (
    <div className="w-72">
      <DatePicker
        selectedDate={date}
        onChange={setDate}
      />
    </div>
  )
}

Variants

Date picker with different visual styles

minimal

gradient

neumorphic

dark

playful

material

ios

'use client'

import { DatePicker } from '@/components/pacmanui/date-picker'
import { useState } from 'react'

export default function VariantsExample() {
  const [dates, setDates] = useState<{ [key: string]: Date | null }>({
    minimal: null,
    gradient: null,
    neumorphic: null,
    dark: null,
    playful: null,
    material: null,
    ios: null
  })

  const variants = ['minimal', 'gradient', 'neumorphic', 'dark', 'playful', 'material', 'ios'] as const

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {variants.map((variant) => (
        <div key={variant} className="w-72">
          <h3 className="text-sm font-medium mb-2 capitalize">{variant}</h3>
          <DatePicker
            selectedDate={dates[variant]}
            onChange={(date) => setDates(prev => ({ ...prev, [variant]: date }))}
            variant={variant}
          />
        </div>
      ))}
    </div>
  )
}

Animations

Date picker with different animation styles

fade

slide

scale

rotate

'use client'

import { DatePicker } from '@/components/pacmanui/date-picker'
import { useState } from 'react'

export default function AnimationsExample() {
  const [dates, setDates] = useState<{ [key: string]: Date | null }>({
    fade: null,
    slide: null,
    scale: null,
    rotate: null
  })

  const animations = ['fade', 'slide', 'scale', 'rotate'] as const

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {animations.map((animation) => (
        <div key={animation} className="w-72">
          <h3 className="text-sm font-medium mb-2 capitalize">{animation}</h3>
          <DatePicker
            selectedDate={dates[animation]}
            onChange={(date) => setDates(prev => ({ ...prev, [animation]: date }))}
            animation={animation}
          />
        </div>
      ))}
    </div>
  )
}