React Persian Date Picker 📆

Persian calendar and date picker components for React. This is an open source project made in @evandhq team.

See the demo.

React Persian Date Picker مجموعه‌ای از کامپوننت‌های ReactJS مورد نیاز جهت ایجاد ورود و نمایش تاریخ هجری شمسی است. این نرم‌افزار متن‌باز در ایوند توسعه یافته‌است.

نسخه نمایشی را اینجا ببینید.

Installation

Use npm to install the package:

npm install react-persian-datepicker --save

Usage

This package offers two components, Calendar and DatePicker. The first of which is a simple calendar that you can use in whichever way you want. The second one is an actual input with an input-ish behaviour.

This package uses moment-jalaali under the hood and all the values are basically moment objects.

Below is a basic example.

import React from 'react';
import { Calendar, DatePicker } from 'react-persian-datepicker';

const MyComponent = () => (
  <div>
    <div>
      {/* Calendar Component */}
      <Calendar />
    </div>
    
    <div>
      {/* Date Picker Component */}
      <DatePicker />
    </div>
  </div>
);

API Documentaion

Current API documentation for v3.0.2 is available and for more examples take a look at here.

Note that you need css-loader for /\.css$/ files enabled to have the styles working as we use css modules to put classnames in place. Otherwise, you'll have to pass an object of class names (like a css module) as styles prop. This way, you can develop your own stylesheet for the calendar according to the basic one. The only thing that you will need to do is to require the css file that you made and pass it as styles prop to either Calendar or DatePicker.