Gathering detailed insights and metrics for react-jalali-datepicker
Gathering detailed insights and metrics for react-jalali-datepicker
Gathering detailed insights and metrics for react-jalali-datepicker
Gathering detailed insights and metrics for react-jalali-datepicker
jalali-react-datepicker
React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.
react-multi-date-picker
A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.
@ijavad805/react-datepicker
cool datepicker and calendar for English and Persian
mr-jalali-react-datepicker
React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.
React Simple And Flexible jalaali/Georgian Datepicker
npm install react-jalali-datepicker
Typescript
Module System
Node Version
NPM Version
54.4
Supply Chain
88.9
Quality
74.3
Maintenance
100
Vulnerability
98.6
License
JavaScript (91.05%)
SCSS (8.44%)
Dockerfile (0.27%)
HTML (0.24%)
Total Downloads
10,892
Last Day
3
Last Week
41
Last Month
239
Last Year
1,843
MIT License
6 Stars
132 Commits
4 Forks
1 Watchers
7 Branches
4 Contributors
Updated on Aug 22, 2022
Minified
Minified + Gzipped
Latest Version
0.2.66
Package Id
react-jalali-datepicker@0.2.66
Unpacked Size
170.03 kB
Size
42.68 kB
File Count
5
NPM Version
6.14.10
Node Version
14.15.4
Cumulative downloads
Total Downloads
Last Day
-62.5%
3
Compared to previous day
Last Week
0%
41
Compared to previous week
Last Month
52.2%
239
Compared to previous month
Last Year
72.7%
1,843
Compared to previous year
This package is all about datepickers for react and new features of it will release very soon like SinglePicker
, InputPicker
and so on!
This datepicker component has been developed in a way that currenly supports the Jalaali and global Gregorian calendars and the base idea was to provide a prop called isJalaali
, wich will accept a Boolean
, to datepicker to keep track of usage for that!
RangePicker
SinglePicker
- currently in developmentInputPicker
- currenly in developmentThis component main use case is for selecting a range from datepicker. our date picker has two locale which is based on Jalaali and Gregorian style whcih can be modefined by isJalaali
prop that is been passed to RangePicker
component. a simple use case of that would be like below:
1import { RangePicker } from "react-jalali-datepicker"; 2 3const YourComponent = () => { 4 return ( 5 <section> 6 <RangePicker isJalaali={true} /> 7 </section> 8 ); 9};
this will give you the Rangepicker
Component to use!
there is a prop that os been shipped with this component called onChangeRange
, which will accpet a function. the function will recieve an argument called selectedRange
which is an Object that contains two keys:
startDate
- selected start date, default will be null
stopDate
- selected stop date, default will be null
these are the selected range that is being selected from range picker! you can do what ever you want to do with them like save in state or send it through api call or what ever you want to do with it!
a simple use case is like below where we just destructure the startDate
and stopDate
from selectedRange
argument that is being passed to our handler and log it to the console:
1import { RangePicker } from "react-jalali-datepicker"; 2 3const YourComponent = () => { 4 // you can use `useCallback` here, but i just kept it simple 5 const rangeHandler = ({ startDate, stopDate }) => { 6 console.log("ON_CHANGE_RANGE: ", { startDate, stopDate }); 7 }; 8 9 return ( 10 <section> 11 <RangePicker isJalaali={true} onChangeRange={rangeHandler} /> 12 </section> 13 ); 14};
RangePicker
component has a handy prop called shouldDisableBeforeToday
which recieves a Boolean
indicates that should the days before today be disabled or not! simple use case would be like below:
1import { RangePicker } from "react-jalali-datepicker"; 2 3const YourComponent = () => { 4 // you can use `useCallback` here, but i just kept it simple 5 const rangeHandler = ({ startDate, stopDate }) => { 6 console.log("ON_CHANGE_RANGE: ", { startDate, stopDate }); 7 }; 8 9 return ( 10 <section> 11 <RangePicker isJalaali={true} shouldDisableBeforeToday={true} /> 12 </section> 13 ); 14};
there is a props called numberOfMonths
which most of the datepickers has these days, which will get a Number
and it shows the number of monthes since today, for example if we are in May and the passed number was 2 the the rangepicker shows the May and June.
there is a props called defaultSelectedRange
which will recieve an Object type with this shape:
1 2 { 3 startDate: null, 4 stopDate: null 5 } 6
keep in mind these important points
YYYY-MM-DD
isJalaali
prop is true you might pass date in Jalaali format like 1399-3-12
and in contrast if your isJalaali
is false you might pass date in Gregorian format like 2020-5-25
(also you can skip the leading 0 befor day and month it the day ot month has only one character); and for that you might have a mechanisem that keeps track of isJalaali
and based on isJalaali it will give the proper values, you may need moment-jalaali
for that to handle it in your side! and also note that there are some utils function like converDate
which you can pull from package to handle this part a simple useCase is like below:1import { convertDate, DATE_FORMATS } from "react-jalali-datepicker"; 2 3const gregDate = "2020-5-25"; 4const jalaaliDate = "1399-3-5"; 5const { GEORGIAN_DATE_FORMAT, JALAALI_DATE_FORMAT } = DATE_FORMATS; 6const resultInJalaali = convertDate({ gregDate, GEORGIAN_DATE_FORMAT }); 7const resultInGregorian = convertDate({ jalaaliDate, GEORGIAN_DATE_FORMAT }); 8 9console.log(resultInJalaali); // 1399-3-5 10console.log(resultInGregorian); // 2020-5-25
isJalaali
prop to convert tha datepicker type to Jalaali
or Gregorian
, the Rangepicker
component wont lost the selected range between type cahnges, you alweays have your selected range in proper format!.range-picker
class and replace the subsequent classnames. just inspect and get the classnames to see what i mean, i will put the classnames here as soon as possible!I will update the documentation as soon as it is possible, jut DM me or find me on social with @a_m_dev!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 4/26 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More