https://github.com/Shmulik-Kravitz/react-jewish-datepicker
React jewish datepicker
https://github.com/Shmulik-Kravitz/react-jewish-datepicker
datepicker hebrew hebrew-calendar hebrew-date jewish react typescript
Last synced: 7 months ago
JSON representation
React jewish datepicker
- Host: GitHub
- URL: https://github.com/Shmulik-Kravitz/react-jewish-datepicker
- Owner: Shmulik-Kravitz
- License: mit
- Created: 2020-06-04T18:03:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-02T13:18:53.000Z (about 1 year ago)
- Last Synced: 2024-10-02T13:20:55.206Z (about 1 year ago)
- Topics: datepicker, hebrew, hebrew-calendar, hebrew-date, jewish, react, typescript
- Language: TypeScript
- Homepage: https://react-jewish-datepicker.js.org/
- Size: 9.66 MB
- Stars: 47
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-jewish-github - Shmulik-Kravitz/react-jewish-datepicker - React jewish datepicker (Projects / Zmanim)
README
# react-jewish-datepicker
[](https://www.npmjs.com/package/react-jewish-datepicker)
[](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/)
[](https://bundlephobia.com/package/react-jewish-datepicker)
[](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/)
# React Jewish Date Picker
General Jewish Date Picker component that works with react and supports hebrew and english.
See also [demo and documentation](https://react-jewish-datepicker.js.org/) page.
## Installation
```console
yarn add react-jewish-datepicker
```
Or with npm
```console
npm install react-jewish-datepicker --save
```
Import the css
```JavaScript
import "react-jewish-datepicker/dist/index.css";
```
or with css
```JavaScript
@import url("react-jewish-datepicker/dist/index.css");
```
## Usage
#### TypeScript example:
```js
import * as React from "react";
import {
ReactJewishDatePicker,
BasicJewishDay,
BasicJewishDate
} from "react-jewish-datepicker";
import "react-jewish-datepicker/dist/index.css";
import {
JewishMonth,
} from "jewish-dates-core";
export default function App() {
const [basicJewishDay, setBasicJewishDay] = React.useState();
const basicJewishDate: BasicJewishDate = {
day: 13,
monthName: JewishMonth.Elul,
year: 5788
};
return (
<>
Hebrew:
{
setBasicJewishDay(day);
}}
/>
>
);
}
```
[](https://codesandbox.io/s/react-jewish-datepicker-typescript-example-1myb0?fontsize=14&hidenavigation=1&theme=dark)
#### JavaScript example:
```js
import * as React from "react";
import { ReactJewishDatePicker, BasicJewishDay } from "react-jewish-datepicker";
import "react-jewish-datepicker/dist/index.css";
export default function App() {
const [basicJewishDay, setBasicJewishDay] = React.useState();
return (
{
setBasicJewishDay(day);
}}
/>
);
}
```
[](https://codesandbox.io/s/pedantic-gagarin-rdeov?fontsize=14&hidenavigation=1&theme=dark)
## props
| Prop name | Description | Value types |
| --------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| canSelect | Accepts a function which determines whether a day is selectable | `(day: BasicJewishDay) => condition ? false : true` |
| isHebrew | Optional. Whether the view language is hebrew or english, Default is `false` | `false` \| `true` |
| isRange | Optional. Allow to select date ranges. Default is `false` | `false` \| `true` |
| onClick | Callback when a date is selected | `(day: BasicJewishDay) => console.log(day)` \| `(startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay)` |
| value | Optional. Initial selected date | `Date` \| `BasicJewishDate` \| `BasicJewishDateRange` \| `DateRange` |
### `canSelect` prop
The `canSelect` can take either a [`costum function`](https://react-jewish-datepicker.js.org/#disableWithCustomFunction) or one of the build-in functions as follows.
#### dontSelectHolidays([isIsrael: `boolean`]) ⇒ `(day: BasicJewishDay) => boolean`
Takes `isIsrael` param and returns a function which in turn is passed to the `canSelect` prop, in order to prevent holidays (corresponding with `isIsrael` param) selection.
| Param | Type | Default |
| ----- | ------ | ----- |
| isIsrael | `boolean` | `false` |
See example [here](https://react-jewish-datepicker.js.org/#disableHolidays)
#### dontSelectShabat(day: `BasicJewishDay`) ⇒ `boolean`
A function to be passed to the `canSelect` prop, in order to prevent shabat selection.
See example [here](https://react-jewish-datepicker.js.org/#disableShabat)
#### dontSelectShabatAndHolidays([isIsrael: `boolean`]) ⇒ `(day: BasicJewishDay) => boolean`
Takes `isIsrael` param and returns a function to be passed to the "canSelect" prop. combines `dontSelectHolidays` and `dontSelectShabat` in order to prevent both - shabat and holidays selection.
| Param | Type | Default |
| ----- | ------ | ----- |
| isIsrael | `boolean` | `false` |
See example [here](https://react-jewish-datepicker.js.org/#disableShabatAndHolidays)
#### dontSelectOutOfRange(minDate: `Date` | `null`, maxDate: `Date` | `null`) ⇒ `(day: BasicJewishDay) => boolean`
Takes min date and max date and returns a function to be passed to the "canSelect" prop, in order to prevent selection out of the supplied range.
You can pass a date only for one of the params and null to the other. In this case, the selectable range will be up to max date or from min date.
| Param | Type |
| ----- | ------ |
| minDate | `Date` \| `null` |
| maxDate | `Date` \| `null` |
See example [here](https://react-jewish-datepicker.js.org/#selectionWithinRange)
### Helper Functions
#### addDates(date: `BasicJewishDate` | `Date`, numDays: `number`) ⇒ `Date`
a helper function for `dontSelectOutOfRange`.
Takes a `BasicJewishDate` object or a `Date`, adds a date interval (`numDays`) to the date and then returns the new date.
| Param | Type |
| ----- | ------ |
| date | `BasicJewishDate` \| `Date` |
| numDays | `number` |
See example [here](https://react-jewish-datepicker.js.org/#selectionWithinRange)
#### subtractDates(date: `BasicJewishDate` | `Date`, numDays: `number`) ⇒ `Date`
a helper function for `dontSelectOutOfRange`.
Takes a `BasicJewishDate` object or a `Date`, subtracts a date interval (`numDays`) from the date and then returns the new date.
| Param | Type |
| ----- | ------ |
| date | `BasicJewishDate` \| `Date` |
| numDays | `number` |
See example [here](https://react-jewish-datepicker.js.org/#selectionWithinRange)
### jewish-dates-core
To create a jewish date picker in vue.js or angular, see our [core dependency](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/blob/master/packages/jewishDatesCore/README.md).
### jewish-date
If you only need the hebrew date convertor without a date picker you can use [jewish-date](https://www.npmjs.com/package/jewish-date).
## Contributors
- [Shmulik Kravitz](https://github.com/Shmulik-Kravitz)
- [Sagi Tawil](https://github.com/sagi770)
- [Yochanan Sheinberger](https://github.com/yochanan-sheinberger)
License: [MIT](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/blob/master/LICENSE)