Noa Jalali DatePicker

A modern, Persian (Jalali) date picker for React applications with full Tailwind CSS support. This date picker provides a sleek and user-friendly interface for selecting dates with extensive customization options.

Demo

Screenshots

Demo page: Noa Jalali Datepicker

Installation

npm

npm install noa-jalali-datepicker

yarn

yarn add noa-jalali-datepicker

Usage

Basic Usage

import React, { useState } from 'react';
import { DatePicker } from 'noa-jalali-datepicker';

const App: React.FC = () => {
    const [selectedDate, setSelectedDate] = useState<string | null>(null);

    return (
        <DatePicker
            value={selectedDate}
            onChange={(date) => setSelectedDate(date)}
            className="w-72"
        />
    );
};

export default App;

With Tailwind Customization

import React, { useState } from 'react';
import { DatePicker } from 'noa-jalali-datepicker';

const App: React.FC = () => {
    const [selectedDate, setSelectedDate] = useState<string | null>(null);

    return (
        <DatePicker
            value={selectedDate}
            onChange={(date) => setSelectedDate(date)}
            className="w-72"
            inputClassName="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
            popupClassName="w-72 bg-white dark:bg-gray-800"
            selectedDayClassName="bg-blue-500 text-white hover:bg-blue-600"
            holidayClassName="text-red-500 dark:text-red-400"
            todayClassName="ring-2 ring-blue-500"
            size="md"
            dir="rtl"
        />
    );
};

Features

• Tailwind CSS Support: Full integration with Tailwind CSS for extensive styling
• Light and Dark Themes: Built-in support for light and dark modes
• Modern Design: Flat design with customizable rounded corners
• User-Friendly: Intuitive interface for date selection
• Responsive: Fully responsive design for all screen sizes
• RTL Support: Built-in support for right-to-left languages

Props

Prop	Type	Description
value	string | null	Selected date value
onChange	(date: string) => void	Callback when date changes
disabled	boolean	Disable the date picker
placeholderText	string	Placeholder text
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the date picker
dir	"rtl" | "ltr"	Text direction
className	string	Container Tailwind classes
inputClassName	string	Input field Tailwind classes
popupClassName	string	Popup container Tailwind classes
headerClassName	string	Header Tailwind classes
weeksClassName	string	Week row Tailwind classes
weekItemClassName	string	Week day item Tailwind classes
daysClassName	string	Days grid Tailwind classes
dayClassName	string	Day item Tailwind classes
selectedDayClassName	string	Selected day Tailwind classes
holidayClassName	string	Holiday Tailwind classes
todayClassName	string	Today Tailwind classes
monthsGridClassName	string	Months grid Tailwind classes
monthItemClassName	string	Month item Tailwind classes
selectedMonthClassName	string	Selected month Tailwind classes
yearsGridClassName	string	Years grid Tailwind classes
yearItemClassName	string	Year item Tailwind classes
selectedYearClassName	string	Selected year Tailwind classes
arrowClassName	string	Navigation arrow Tailwind classes

Default Tailwind Classes

The component comes with sensible defaults that you can override:

const defaultClasses = {
    container: 'relative',
    input: 'w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2',
    popup: 'absolute mt-1 bg-white rounded-lg shadow-lg z-50',
    selectedDay: 'bg-blue-500 text-white hover:bg-blue-600',
    holiday: 'text-red-500',
    today: 'ring-2 ring-blue-500'
    // ... more defaults available
}

Dark Mode Support

The date picker supports Tailwind's dark mode out of the box. Example usage:

<DatePicker
    className="w-72"
    inputClassName="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700"
    popupClassName="bg-white dark:bg-gray-800"
    selectedDayClassName="bg-blue-500 dark:bg-blue-600"
    dayClassName="text-gray-700 dark:text-gray-200"
/>

Authors

• FreeCyberHawk
• YousefZare

License

MIT