Kara Persian DatePicker

A modern, Persian date picker for React applications. This date picker supports both light and dark themes, providing a sleek and user-friendly interface for selecting dates.

Demo

ScreenShots

Demo page: Kara Persian Datepicker

Installation

npm

To install the package via npm, run:

npm install kara-persian-datepicker

yarn

yarn add kara-persian-datepicker

Usage

import React, {useState} from 'react';
import {DatePicker} from 'kara-persian-datepicker';
import 'kara-persian-datepicker/dist/index.css';

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

    return (
        <div>
            <h1>Kara Persian DatePicker</h1>
            <DatePicker
                value={selectedDate}
                textPlaceholder: 'Pick a date'
            , // Placeholder text in Persian
            onChange={(date) => {
            console.log(date);
            setSelectedDate(date);
        }}
            classStyle={{
            radius: 8, // Border radius for rounded corners
            borderColor: '#E2e8f0', // Border color for the date picker
            selectedDayColor: '#007BFF', // Blue color for the selected day
            inputStyle: {padding: '10px', fontSize: '16px'}, // Custom input styles
        }}
            />
            {selectedDate && <p>Selected Date: {selectedDate}</p>}
        </div>
    );
};

export default App;

Features

• Light and Dark Themes: Easily switch between light and dark modes.
• Modern Design: Flat design with rounded corners for a sleek look.
• User-Friendly: Simple interface for selecting dates.
• Responsive: Works well on various screen sizes.

Props

| Prop | Type | Description | |--------------|------------------------|----------------------------------------------------------------------------------------------| | value | string | string Or null | | disabled | boolean | Optional. If true, disables the date picker. | | theme | string | Optional. Allows you to set the theme ('light' or 'dark'). Default is 'light'. | | classStyle | object | Optional | | onChange | (date: Date) => void | Callback function called when a date is selected. Receives the selected date as an argument. |

classStyle Props

| Prop | Value | Description | |-----------------------|-----------------|------------------------------------| | backgroundColor | #000 | Dark background color. | | textColor | #fff | White text color. | | textPlaceholder | 'Pick a date' | Placeholder text (in Persian). | | textAlign | right | Aligns text to the right. | | size | md | Medium size of the date picker. | | radius | 8px | Border radius for rounded corners. | | borderColor | #E2e8f0 | Border color for the date picker. | | selectedDayColor | #007BFF | Blue color for the selected day. | | inputStyle.padding | 10px | Padding for the input field. | | inputStyle.fontSize | 16px | Font size for the input text. |

Customization

You can customize the appearance of the date picker by modifying the CSS file or overriding styles in your own stylesheets. The classStyle prop allows for extensive customization, including background color, text color, and size.

Authors

• Yousef Zare
• FastPanda99