KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

jalaali-react-date-picker

★ 36 Open GitHub ↗

This package is a date picker component for React that supports the Jalaali (Iranian/Shamsi/Persian) calendar system.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![NPM](https://nodei.co/npm/jalaali-react-date-picker.png)](https://nodei.co/npm/jalaali-react-date-picker/)

# Jalaali React Datepicker

Welcome to our date picker for React applications! This package offers a customizable and localized solution for selecting dates in your projects. With support for the Jalaali calendar system, our date picker allows you to easily implement date selection in your React projects, whether you need to select a single date, or range of dates. Get started now by installing the package and integrating it into your React code.

[![Version][version-badge]][package]
[![NPM Downloads][dw-badge]][package]

[dw-badge]: https://img.shields.io/npm/dw/jalaali-react-date-picker
[version-badge]: https://img.shields.io/npm/v/jalaali-react-date-picker
[package]: https://www.npmjs.com/package/jalaali-react-date-picker

## Installation

To install jalaali-react-date-picker, you will need to have [npm](https://npmjs.com) or [yarn](https://yarnpkg.com) installed on your system. Once you have one of these package managers set up, you can install jalaali-react-date-picker by running the following command:

```bash
  npm install --save jalaali-react-date-picker
```

```bash
  yarn add jalaali-react-date-picker
```

This will install the latest version of jalaali-react-date-picker and add it as a dependency to your project.

## Usage/Examples

First, import the necessary styles at top of your application:

```javascript
import "jalaali-react-date-picker/lib/styles/index.css";
```

# DatePicker

The **DatePicker** component is a standalone calendar picker that allows the user to select a single date.

```javascript
import { DatePicker } from "jalaali-react-date-picker";

function App() {
  return <DatePicker />;
}
```

# RangePicker

The **RangePicker** component is a calendar picker that allows the user to select a range of dates.

```javascript
import { RangePicker } from "jalaali-react-date-picker";

function App() {
  return <RangePicker />;
}
```

# InputDatePicker

The **InputDatePicker** component is a calendar picker that is displayed as an input field. The user can select a single date by clicking the input field and selecting a date from the calendar picker.

```javascript
import { InputDatePicker } from "jalaali-react-date-picker";

function App() {
  return <InputDatePicker />;
}
```

# InputRangePicker

The **InputRangePicker** component is a calendar picker that is displayed as two input fields. The user can select a range of dates by clicking on either of the input fields and selecting a date from the calendar picker.

```javascript
import { InputRangePicker } from "jalaali-react-date-picker";

function App() {
  return <InputRangePicker />;
}
```

## Live Demo Examples

To see demo examples, run the following command:

```bash
  npm run storybook or yarn storybook
```

## Running Tests

To run tests, run the following command:

```bash
  npm run test or yarn test
```

## Features

- Full support for React and server-side frameworks like Next.js: The package is designed to work seamlessly with these technologies, allowing you to easily incorporate it into your project.

- Custom date highlighting: With this feature, you can define specific dates and highlight them with any color you choose. This is useful for highlighting important dates, events, or deadlines.

- Complete style customization: The package allows you to fully customize the styles, including colors and style overrides. This means you can match the calendar to the look and feel of your project.

- Support for both Gregorian and Jalaali (Shamsi) date formats: The package provides support for both formats, giving you the flexibility to use the one that best fits your needs.

## Props

The **jalaali-react-date-picker** package offers a wide range of customizable props for each of the components. Here is a list of the available props for each component:

# DatePicker

# RangePicker

# InputDatePicker

## PickerProps

# InputRangePicker

## RangeProps

## Authors

- [@alirezahematidev](https://github.com/alirezahematidev)
- [@mohammadgharouni](https://github.com/mohammadgharouni)
- [@samimideveloper](https://github.com/samimideveloper)

This authors section lists the names and github profiles of the individuals who have contributed to the project. It is a good way to acknowledge the work and efforts of the people involved in the project, and can also make it easier for users to contact the authors if they have questions or want to contribute to the project.

## Dependencies

[moment.js](https://momentjs.com) - A powerful and flexible JavaScript library for manipulating dates and times. We use Moment.js to handle date formatting and manipulation in our project.

## License

[MIT](https://choosealicense.com/licenses/mit/)

jalaali-react-date-picker

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README