noa-jalali-datepicker v0.1.4

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

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