Kara Persian DatePicker

Features

Light Theme

Dark Theme

Customization

Modern Design

Year List

Month List

How to Install

Install with npm

npm install kara-persian-datepicker

Install with yarn

yarn add kara-persian-datepicker

Get Started

After installing the package via npm or yarn, you can easily integrate the Kara Persian DatePicker into your React project. The following usage example demonstrates how to import the date picker, manage its state, and customize its appearance using various props. Whether you prefer a light or dark theme, our date picker is fully customizable to match your design requirements. Check out the code snippet below to see how simple it is to use!

Usage Example


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

const App = () => {
    const [selectedDate, setSelectedDate] = useState(null);

    return (
        <div>
            <h1>Kara Persian DatePicker</h1>
            <DatePicker
                value={selectedDate}
                onChange={(date) => setSelectedDate(date)}
                classStyle={{
                    backgroundColor: '#000',
                    textColor: '#fff',
                    textPlaceholder: 'Pick a date',
                    textAlign: 'right',
                    size: 'md',
                    radius: '8px',
                    borderColor: '#E2e8f0',
                    selectedDayColor: '#007BFF',
                    inputStyle: { padding: '10px', fontSize: '16px' }
                }}
                theme="dark"
            />
        </div>
    );
};

export default App;