{"id":23460133,"url":"https://github.com/a-m-dev/react-jalali-datepicker","last_synced_at":"2025-04-14T04:54:45.792Z","repository":{"id":44590633,"uuid":"261745058","full_name":"a-m-dev/react-jalali-datepicker","owner":"a-m-dev","description":"React Simple And Flexible jalaali/Georgian Datepicker","archived":false,"fork":false,"pushed_at":"2022-02-06T11:19:09.000Z","size":864,"stargazers_count":6,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T18:52:51.663Z","etag":null,"topics":["date","datepicker","jalaali","jalali","jalali-date-picker","javascript","react","react-hooks","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-m-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-06T11:59:16.000Z","updated_at":"2022-08-22T09:50:18.000Z","dependencies_parsed_at":"2022-09-16T14:31:47.726Z","dependency_job_id":null,"html_url":"https://github.com/a-m-dev/react-jalali-datepicker","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-m-dev%2Freact-jalali-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-m-dev%2Freact-jalali-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-m-dev%2Freact-jalali-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-m-dev%2Freact-jalali-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-m-dev","download_url":"https://codeload.github.com/a-m-dev/react-jalali-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824689,"owners_count":21167343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date","datepicker","jalaali","jalali","jalali-date-picker","javascript","react","react-hooks","react-native"],"created_at":"2024-12-24T06:44:38.002Z","updated_at":"2025-04-14T04:54:45.763Z","avatar_url":"https://github.com/a-m-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Jalali Datepicker\n\n![Rangepicker](https://github.com/a-m-dev/react-jalali-datepicker/blob/master/src/img/jalali.png)\n\n\u003cbr /\u003e\nA Simple jalali datepicker for React and React-native!\n\nThis package is all about datepickers for react and new features of it will release very soon like `SinglePicker`, `InputPicker` and so on!\n\n### The General Idea\n\nThis 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!\n\n### components\n\n- `RangePicker`\n- `SinglePicker`\n- `InputPicker` - currenly in development\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### RangePicker\n\nThis 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:\n\n```jsx\nimport { RangePicker } from \"react-jalali-datepicker\";\n\nconst YourComponent = () =\u003e {\n  return (\n    \u003csection\u003e\n      \u003cRangePicker isJalaali={true} /\u003e\n    \u003c/section\u003e\n  );\n};\n```\n\nthis will give you the `Rangepicker` Component to use!\n\n#### How to get Date out of this picker?\n\nthere 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:\n\n- `startDate` - selected start date, default will be `null`\n- `stopDate` - selected stop date, default will be `null`\n\nthese 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!\n\na 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:\n\n```jsx\nimport { RangePicker } from \"react-jalali-datepicker\";\n\nconst YourComponent = () =\u003e {\n  // you can use `useCallback` here, but i just kept it simple\n  const rangeHandler = ({ startDate, stopDate }) =\u003e {\n    console.log(\"ON_CHANGE_RANGE: \", { startDate, stopDate });\n  };\n\n  return (\n    \u003csection\u003e\n      \u003cRangePicker isJalaali={true} onChangeRange={rangeHandler} /\u003e\n    \u003c/section\u003e\n  );\n};\n```\n\n#### how to disable days before today?\n\n`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:\n\n```jsx\nimport { RangePicker } from \"react-jalali-datepicker\";\n\nconst YourComponent = () =\u003e {\n  // you can use `useCallback` here, but i just kept it simple\n  const rangeHandler = ({ startDate, stopDate }) =\u003e {\n    console.log(\"ON_CHANGE_RANGE: \", { startDate, stopDate });\n  };\n\n  return (\n    \u003csection\u003e\n      \u003cRangePicker isJalaali={true} shouldDisableBeforeToday={true} /\u003e\n    \u003c/section\u003e\n  );\n};\n```\n\n#### how to show more month in table?\n\nthere 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.\n\n#### how to pass default selected range?\n\nthere is a props called `defaultSelectedRange` which will recieve an Object type with this shape:\n\n```javascript\n\n  {\n    startDate: null,\n    stopDate: null\n  }\n\n```\n\n**keep in mind these important points**\n\n1.  the date might be in this format all time `YYYY-MM-DD`\n2.  if your `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:\n\n```js\nimport { convertDate, DATE_FORMATS } from \"react-jalali-datepicker\";\n\nconst gregDate = \"2020-5-25\";\nconst jalaaliDate = \"1399-3-5\";\nconst { GEORGIAN_DATE_FORMAT, JALAALI_DATE_FORMAT } = DATE_FORMATS;\nconst resultInJalaali = convertDate({ gregDate, GEORGIAN_DATE_FORMAT });\nconst resultInGregorian = convertDate({ jalaaliDate, GEORGIAN_DATE_FORMAT });\n\nconsole.log(resultInJalaali); // 1399-3-5\nconsole.log(resultInGregorian); // 2020-5-25\n```\n\n### some features of RangePicker component\n\n1. if you had a button that keeps track of `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!\n2. you can put some custome styles on you rangepicker to make it fully custome! since it written in BEM, you can keep track of `.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!\n\nI will update the documentation as soon as it is possible, jut DM me or find me on social with @a_m_dev!\n\n\n\n\n\n\n\n### Contributers\n\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/29652890?s=460\u0026u=4eaf008b6aae70c8b7a7afa39901e0af7247644c\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmad Mirzaei\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e](https://github.com/a-m-dev) | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/40192286?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNajmah Hosseini Majd\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e](https://github.com/hosseiniMajd) |\n|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-m-dev%2Freact-jalali-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-m-dev%2Freact-jalali-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-m-dev%2Freact-jalali-datepicker/lists"}