Package Exports

@crjuice/unified-date-picker
@crjuice/unified-date-picker/dist/index.js
@crjuice/unified-date-picker/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@crjuice/unified-date-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@crjuice/unified-date-picker

A beautiful and flexible date range picker component for React with built-in presets.

Features

📅 Date range selection with visual calendar
⚡ Pre-defined date presets (Last 7 days, Last Month, etc.)
🎨 Built with Tailwind CSS and Radix UI
🎯 TypeScript support
🔧 Fully customizable

Installation

npm install @crjuice/unified-date-picker
# or
pnpm add @crjuice/unified-date-picker
# or
yarn add @crjuice/unified-date-picker

Prerequisites

This component requires Tailwind CSS to be set up in your project. Make sure you have it installed and configured.

Usage

import { UnifiedDatePicker } from '@crjuice/unified-date-picker'
import type { DateRange } from '@crjuice/unified-date-picker'
import { useState } from 'react'

function App() {
  const [dateRange, setDateRange] = useState<DateRange>()

  return (
    <UnifiedDatePicker
      date={dateRange}
      onDateChange={setDateRange}
    />
  )
}

Props

Prop	Type	Description	Default
`date`	`DateRange \| undefined`	The currently selected date range	-
`onDateChange`	`(date: DateRange \| undefined) => void`	Callback when date range changes	-
`theme`	`'light' \| 'dark'`	Color theme for the picker	`'light'`
`className`	`string`	Optional CSS class name	-

DateRange Type

type DateRange = {
  from: Date | undefined
  to: Date | undefined
}

Styling

The component uses Tailwind CSS classes and requires your Tailwind configuration to include the necessary color utilities. Make sure your tailwind.config.js includes:

module.exports = {
  content: [
    './node_modules/@crjuice/unified-date-picker/dist/**/*.{js,mjs}',
    // ... your other content paths
  ],
  // ... rest of your config
}

License

MIT