LLLDatePicker

A modern, customizable date picker library for React with Lao language support. Built with React, TypeScript, TailwindCSS, and shadcn/ui.

Features

• ✅ Lao Language Support - All preset buttons and labels in Lao
• ✅ Manual Date Input - Separate day/month/year input fields
• ✅ 8 Preset Date Ranges - Quick selection for common date ranges
• ✅ Customizable Styling - Full control via className props
• ✅ TypeScript Support - Complete type definitions included
• ✅ Modern UI - Built with shadcn/ui components
• ✅ Lightweight - Minimal dependencies

Installation

# Using pnpm
pnpm install lll-date-picker

# Using npm
npm install lll-date-picker

# Using yarn
yarn add lll-date-picker

Quick Start

import { LLLDatePicker } from 'lll-date-picker';
import 'lll-date-picker/styles.css';

function App() {
  const handleDateChange = (startDate: Date | null, endDate: Date | null) => {
    console.log('Selected dates:', { startDate, endDate });
  };

  return (
    <LLLDatePicker
      onDateChange={handleDateChange}
      placeholder="ເລືອກວັນທີ"
    />
  );
}

Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | startDate | Date \| undefined | undefined | Initial start date | | endDate | Date \| undefined | undefined | Initial end date | | onDateChange | (startDate: Date \| null, endDate: Date \| null) => void | undefined | Callback when dates change | | className | string | undefined | Custom CSS classes for root container | | buttonClassName | string | undefined | Custom CSS classes for trigger button | | dropdownClassName | string | undefined | Custom CSS classes for dropdown card | | disabled | boolean | false | Disable the date picker | | placeholder | string | 'ເລືອກວັນທີ' | Placeholder text for button | | labels | object | undefined | Custom labels for preset buttons | | labelInputs | object | undefined | Custom labels for start/end date inputs | | quickSelectLabel | string | 'ເລືອກໄລຍະເວລາ' | Custom label for quick select section |

Preset Date Ranges

The date picker includes 8 preset options in Lao:

| Preset | Lao | Description | |--------|-----|-------------| | Today | ມື້ນີ້ | Current day | | Yesterday | ມື້ວານ | Previous day | | Last Week | ອາທິດກ່ອນ | 7 days ago to yesterday | | This Week | ອາທິດນີ້ | Monday to today | | Last Month | ເດືອນກ່ອນ | First to last day of previous month | | This Month | ເດືອນນີ້ | First day of month to today | | Last Year | ປີກ່ອນ | Jan 1 to Dec 31 of previous year | | This Year | ປີນີ້ | Jan 1 to today |

Examples

With Initial Values

<LLLDatePicker
  startDate={new Date('2024-01-01')}
  endDate={new Date('2024-12-31')}
  onDateChange={handleDateChange}
/>

Custom Styling

<LLLDatePicker
  buttonClassName="bg-blue-500 text-white hover:bg-blue-600"
  dropdownClassName="shadow-2xl"
  onDateChange={handleDateChange}
/>

Controlled Component

function ControlledExample() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <LLLDatePicker
      startDate={startDate || undefined}
      endDate={endDate || undefined}
      onDateChange={(start, end) => {
        setStartDate(start);
        setEndDate(end);
      }}
    />
  );
}

Custom Text & Labels

You can customize all text labels including inputs and preset buttons:

<LLLDatePicker
    labels={{
        today: 'Today',
        yesterday: 'Yesterday',
        lastWeek: 'Last Week',
        thisWeek: 'This Week',
        lastMonth: 'Last Month',
        thisMonth: 'This Month',
        lastYear: 'Last Year',
        thisYear: 'This Year',
        clear: 'Clear',
    }}
    labelInputs={{
        startLabel: 'Start Date',
        endLabel: 'End Date',
    }}
    quickSelectLabel='Quick Select'
    onDateChange={handleDateChange}
/>

Utility Functions

The library also exports utility functions for advanced usage:

import {
  getToday,
  getYesterday,
  getLastWeek,
  getThisWeek,
  getLastMonth,
  getThisMonth,
  getLastYear,
  getThisYear,
  formatDate,
  parseDate,
  isValidDate,
  createDate,
  extractDateParts,
} from 'lll-date-picker';

// Example: Get today's date range
const today = getToday();
console.log(today); // { startDate: Date, endDate: Date }

// Example: Format a date
const formatted = formatDate(new Date()); // "05/02/2026"

Development

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build library
pnpm build

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Created By:

• MisterSee VANG