Noa Jalali Date Picker

Features

Light Theme

Dark Theme

Customization

Modern Design

Year List

Month List

How to Install

Install with npm

npm install noa-jalali-datepicker

Install with yarn

yarn add noa-jalali-datepicker

Get Started

After installing the package via npm or yarn, you can easily integrate the Noa Jalali Date Picker 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 'noa-jalali-datepicker';
import 'noa-jalali-datepicker/dist/index.css';

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

    return (
        <div>
            <h1>Noa Jalali Date Picker</h1>
            <DatePicker
                textPlaceholder: 'Pick a date',
                value={selectedDate}
                onChange={(date) => setSelectedDate(date)}
                classStyle={{
                    size: 'md',
                    radius: 8,
                    borderColor: '#E2e8f0',
                    selectedDayColor: '#007BFF',
                    inputStyle: { padding: '10px', fontSize: '16px' }
                }}
            />
        </div>
    );
};

export default App;