jalaali-react-date-picker

v1.0.19

This package is a date picker component for React that supports the Jalaali (Iranian/Shamsi/Persian) calendar system. It provides an easy-to-use interface for selecting a date in the Jalaali calendar and is fully customizable with options for setting the For more information about how to use this package see README

Latest version published 1 month ago

License: MIT

NPM

GitHub

Package Health Score

64 / 100

security
Security review needed
popularity
Limited
maintenance
Healthy
community
Limited

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version			Vulnerabilities	License Risk
1.0.19	\|	10/2024	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.1.47	\|	01/2023	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.0.99	\|	12/2022	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (284)

GitHub Stars: 29
Forks: 6
Contributors: 3

Direct Usage Popularity

The npm package jalaali-react-date-picker receives a total of 284 downloads a week. As such, we scored jalaali-react-date-picker popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package jalaali-react-date-picker, we found that it has been starred 29 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Limited

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 3
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like jalaali-react-date-picker is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 1
Open PR: 1
Last Release: 1 month ago
Last Commit: 1 month ago

Further analysis of the maintenance status of jalaali-react-date-picker based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that jalaali-react-date-picker demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 2 years
Dependencies: 13 Direct
Versions: 83
Install Size: 673 kB
Dist-tags: 1
# of Files: 306
Maintainers: 2
TS Typings: Yes

jalaali-react-date-picker has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

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.

Installation

To install jalaali-react-date-picker, you will need to have npm or yarn 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:

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

  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:

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.

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

function App() {
  return ;
}

RangePicker

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

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

function App() {
  return ;
}

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.

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

function App() {
  return ;
}

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.

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

function App() {
  return ;
}

Live Demo Examples

To see demo examples, run the following command:

  npm run storybook or yarn storybook

Running Tests

To run tests, run the following command:

  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

Property	Type	Description
`value`	`Moment \| null`	The currently selected date.
`defaultValue`	`Moment \| null`	To set default value, if `value` is `undefined` or `null`, the date picker will show default value.
`onChange`	`(date: Moment \| null, dateString: string) => void`	Callback function which will be executed when date changes.
`onDayChange`	`(day:number) => void`	Callback function which will be executed when day changes.
`onMonthChange`	`(month:MonthValue) => void`	Callback function which will be executed when month changes.
`onYearChange`	`(year:number) => void`	Callback function which will be executed when year changes.
`format`	`string \| (value:Moment) => string`	The format is which the selected date should be displayed. Uses moment.js format strings.
`locale`	`Locale`	The locale to be used for localization, while default locale is `fa`.
`disabledDates`	`(current:Moment) => boolean`	Callback function that can specify the date that cannot be selected
`onModeChange`	`(mode:Mode) => void`	Callback function which will be executed when calendar mode changes.
`panelRender`	`(date:PanelDate,panelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for calendar panel component.
`footerRender`	`(current:Date \| null, footerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for footer component.
`headerRender`	`(current:Date \| null, headerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for header component.
`dayLabelRender`	`(labels:string[],labelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom for day labels component.
`highlightDays`	`Moment[] \| (date:Moment) => boolean`	The `highlightDays` can be used to determines which dates should be highlighted. it accepts array of `moment` or a callback function.
`highlightWeekend`	`boolean`	If `highlightWeekend` set to `true`, its turn weekend days to highlighted. Default is `true`.
`customColors`	`ColorSchema`	The `customColors` can be used to overrides the default colors.
`nextIcon`	`React.ReactNode`	custom icon for next month
`prevIcon`	`React.ReactNode`	custom icon for previous month
`superNextIcon`	`React.ReactNode`	custom icon for next year
`superPrevIcon`	`React.ReactNode`	custom icon for previous year
`loading`	`boolean`	If `true`, renders loading component in calendar instead of caledar panel
`loadingIndicator`	`React.ReactNode`	Set custom loading indicator
`style`	`React.CSSProperties`	styles for root element of calendar panel
`className`	`string`	class for root element of calendar panel

RangePicker

Property	Type	Description
`value`	`[Moment,Moment] \| null`	The currently selected range date date.
`defaultValue`	`[Moment,Moment]`	To set default value, if `value` is `undefined` or `null`, the range picker will show default value.
`onChange`	`(date: [Moment,Moment], dateString: [string,string]) => void`	Callback function which will be executed when range dates changes.
`onDayChange`	`(days:[number,number]) => void`	Callback function which will be executed when days changes.
`onMonthChange`	`(month:[MonthValue,MonthValue]) => void`	Callback function which will be executed when months changes.
`onYearChange`	`(year:[number, number]) => void`	Callback function which will be executed when years changes.
`format`	`string \| (value:[Moment, Moment]) => string`	The format is which the selected range dates should be displayed. Uses moment.js format strings. Default is `jYYYY-jMM-jDD`
`locale`	`Locale`	The locale to be used for localization, while default is `fa`.
`disabledDates`	`(current:Moment) => boolean`	Callback function that can specify the dates that cannot be selected
`onModeChange`	`(mode:Mode) => void`	Callback function which will be executed when calendar mode changes.
`panelRender`	`(date:[PanelRange, PanelRange],panelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for calendar panel component.
`headerRender`	`(current:[Moment, Moment \| null] \| null, headerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for header component.
`dayLabelRender`	`(labels:string[],labelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom for day labels component.
`highlightDays`	`Moment[] \| (date:Moment) => boolean`	The `highlightDays` can be used to determines which dates should be highlighted. it accepts array of `moment` or a callback function.
`highlightWeekend`	`boolean`	If `highlightWeekend` set to `true`, its turn weekend days to highlighted. Default is `true`.
`customColors`	`ColorSchema`	The `customColors` can be used to overrides the default colors.
`nextIcon`	`React.ReactNode`	custom icon for next month
`prevIcon`	`React.ReactNode`	custom icon for previous month
`superNextIcon`	`React.ReactNode`	custom icon for next year
`superPrevIcon`	`React.ReactNode`	custom icon for previous year
`loading`	`boolean`	If `true`, renders loading component in calendar instead of caledar panel
`loadingIndicator`	`React.ReactNode`	Set custom loading indicator
`style`	`React.CSSProperties`	styles for root element of calendar panel
`className`	`string`	class for root element of calendar panel

InputDatePicker

Property	Type	Description
`value`	`Moment \| null`	The currently selected date.
`defaultValue`	`Moment \| null`	To set default value, if `value` is `undefined` or `null`, the date picker will show default value.
`open`	`boolean`	To set `open` the popup calendar.
`disabled`	`boolean`	To set `disable` the popup calendar
`error`	`boolean`	If `true`, the input will indicate an error
`presets`	`boolean`	The preset range dates for quick selection. Default is `true`.
`renderInput`	`(field: FieldProps) => ReactNode`	Customize date picker input render.
`prefixIcon`	`React.ReactNode`	Input custom prefix icon.
`suffixIcon`	`React.ReactNode`	Input custom suffix icon
`placement`	`top \| bottom \| right \| left`	The position where the popup calendar box pops up.
`format`	`string \| (value:Moment) => string`	The format is which the selected date should be displayed. Uses moment.js format strings. Default is `jYYYY-jMM-jDD`
`locale`	`Locale`	The locale to be used for localization, while default is `fa`.
`getPopupContainer`	`HTMLElement \| (() => HTMLElement) \| string`	The mounted node for popup calendar.
`disabledDates`	`(current:Moment) => boolean`	Callback function that can specify the date that cannot be selected
`customColors`	`ColorSchema`	The `customColors` can be used to overrides the default colors.
`onChange`	`(date: Moment \| null, dateString: string) => void`	Callback function which will be executed when date changes.
`onDayChange`	`(day:number) => void`	Callback function which will be executed when day changes.
`onMonthChange`	`(month:MonthValue) => void`	Callback function which will be executed when month changes.
`onYearChange`	`(year:number) => void`	Callback function which will be executed when year changes.
`onOpenChange`	`(open: boolean) => void`	Callback function, can be executed whether the popup calendar is popped up or closed.
`pickerProps`	picker props	Object containing options for changing the picker itself.
`onClear`	`() => void`	Callback function, can be executed when the clear icon is clicked.
`wrapperClassName`	`string`	class for wrapper element of inputs.
`wrapperStyle`	`React.CSSProperties`	styles for wrapper element of inputs.

PickerProps

Property	Type	Description
`panelRender`	`(date:PanelDate,panelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for calendar panel component.
`footerRender`	`(current:Date \| null, footerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for footer component.
`headerRender`	`(current:Date \| null, headerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for header component.
`dayLabelRender`	`(labels:string[],labelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom for day labels component.
`highlightDays`	`Moment[] \| (date:Moment) => boolean`	The `highlightDays` can be used to determines which dates should be highlighted. it accepts array of `moment` or a callback function.
`highlightWeekend`	`boolean`	If `highlightWeekend` set to `true`, its turn weekend days to highlighted. Default is `true`.
`loading`	`boolean`	If `true`, renders loading component in calendar instead of caledar panel
`loadingIndicator`	`React.ReactNode`	Set custom loading indicator
`onModeChange`	`(mode:Mode) => void`	Callback function which will be executed when calendar mode changes.
`style`	`React.CSSProperties`	styles for root element of calendar panel
`className`	`string`	class for root element of calendar panel

InputRangePicker

Property	Type	Description
`value`	`[Moment,Moment]`	The currently selected range date date.
`defaultValue`	`[Moment,Moment]`	To set default value, if `value` is `undefined` or `null`, the range picker will show default value.
`open`	`boolean`	To set `open` the popup calendar.
`disabled`	`boolean`	To set `disable` the popup calendar
`error`	`boolean`	If `true`, the input will indicate an error
`presets`	`boolean`	The preset range dates for quick selection. Default is `true`.
`placeholder`	`[string,string]`	The placeholder of date inputs.
`prefixIcon`	`React.ReactNode`	Input custom prefix icon.
`suffixIcon`	`React.ReactNode`	Input custom suffix icon
`placement`	`top \| bottom \| right \| left`	The position where the popup calendar box pops up.
`getPopupContainer`	`HTMLElement \| (() => HTMLElement) \| string`	The mounted node for popup calendar.
`disabledDates`	`(current:Moment) => boolean`	Callback function that can specify the date that cannot be selected
`format`	`string \| (value:[Moment, Moment]) => string`	The format is which the selected range dates should be displayed. Uses moment.js format strings. Default is `jYYYY-jMM-jDD`
`locale`	`Locale`	The locale to be used for localization, while default is `fa`.
`responsive`	`desktop \| mobile \| auto`	To set responsive, the range picker component is responsed and optimized to device it runs on. Default set to `auto`.
`separator`	`React.ReactNode`	Set separator between inputs.
`customColors`	`ColorSchema`	The `customColors` can be used to overrides the default colors.
`rangeProps`	range props	Object containing options for changing the range picker itself.
`onChange`	`(date: [Moment,Moment], dateString: [string,string]) => void`	Callback function which will be executed when range dates changes.
`onDayChange`	`(days:[number,number]) => void`	Callback function which will be executed when days changes.
`onMonthChange`	`(month:[MonthValue,MonthValue]) => void`	Callback function which will be executed when months changes.
`onYearChange`	`(year:[number, number]) => void`	Callback function which will be executed when years changes.
`onOpenChange`	`(open: boolean) => void`	Callback function, can be executed whether the popup calendar is popped up or closed.
`onClear`	`() => void`	Callback function, can be executed when the clear icon is clicked.
`wrapperStyle`	`React.CSSProperties`	styles for wrapper element of inputs.
`wrapperClassName`	`string`	class for wrapper element of inputs.

RangeProps

Property	Type	Description
`panelRender`	`(date:PanelDate,panelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for calendar panel component.
`headerRender`	`(current:Date \| null, headerNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom node for header component.
`dayLabelRender`	`(labels:string[],labelNode:React.ReactNode) => React.ReactNode`	Callback render function used to render custom for day labels component.
`highlightDays`	`Moment[] \| (date:Moment) => boolean`	The `highlightDays` can be used to determines which dates should be highlighted. it accepts array of `moment` or a callback function.
`highlightWeekend`	`boolean`	If `highlightWeekend` set to `true`, its turn weekend days to highlighted. Default is `true`.
`loading`	`boolean`	If `true`, renders loading component in calendar instead of caledar panel
`loadingIndicator`	`React.ReactNode`	Set custom loading indicator
`onModeChange`	`(mode:Mode) => void`	Callback function which will be executed when calendar mode changes.
`style`	`React.CSSProperties`	styles for root element of calendar panel
`className`	`string`	class for root element of calendar panel

Authors

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 - 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

jalaali-react-date-picker dependencies

@testing-library/jest-dom @testing-library/react @testing-library/react-hooks @testing-library/user-event @types/jest @types/moment-jalaali @types/node classnames cross-env moment moment-jalaali react-scripts typescript

jalaali-react-date-picker development dependencies

@babel/preset-env @babel/preset-react @commitlint/config-conventional @storybook/addon-actions @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/builder-webpack5 @storybook/manager-webpack5 @storybook/react @storybook/testing-library @types/enzyme @types/enzyme-adapter-react-16 @types/moment @types/react @types/react-dom @types/webpack @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-core babel-loader clean-webpack-plugin commitlint compression-webpack-plugin concurrently copy-webpack-plugin css-loader enzyme enzyme-adapter-react-16 eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-storybook eslint-webpack-plugin html-webpack-plugin jest mini-css-extract-plugin prettier prettier-plugin-jsdoc prettier-plugin-organize-imports react react-dom rimraf serve style-loader terser-webpack-plugin ts-loader ts-node tsconfig-paths tsconfig-paths-webpack-plugin url-loader webpack-cli

FAQs

What is jalaali-react-date-picker?

This package is a date picker component for React that supports the Jalaali (Iranian/Shamsi/Persian) calendar system. I... Visit Snyk Advisor to see a full health score report for jalaali-react-date-picker, including popularity, security, maintenance & community analysis.

Is jalaali-react-date-picker popular?

The npm package jalaali-react-date-picker receives a total of 284 weekly downloads. As such, jalaali-react-date-picker popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is jalaali-react-date-picker well maintained?

We found that jalaali-react-date-picker demonstrated a healthy version release cadence and project activity. It has a community of 3 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is jalaali-react-date-picker safe to use?

While scanning the latest version of jalaali-react-date-picker, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 22 November-2024, at 02:24 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (284)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

Jalaali React Datepicker

Installation

Usage/Examples

DatePicker

RangePicker

InputDatePicker

InputRangePicker

Live Demo Examples

Running Tests

Features

Props

DatePicker

RangePicker

InputDatePicker

PickerProps

InputRangePicker

RangeProps

Authors

Dependencies

License

jalaali-react-date-picker dependencies

jalaali-react-date-picker development dependencies

FAQs

What is jalaali-react-date-picker?

Is jalaali-react-date-picker popular?

Is jalaali-react-date-picker well maintained?

Is jalaali-react-date-picker safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues