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

Installation

yarn add react-jewish-datepicker

Or with npm

npm install react-jewish-datepicker --save

Import the css

import "react-jewish-datepicker/dist/index.css";

or with css

@import url("react-jewish-datepicker/dist/index.css");

Usage

TypeScript example:

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<BasicJewishDay>();
  const basicJewishDate: BasicJewishDate = {
    day: 13,
    monthName: JewishMonth.Elul,
    year: 5788
  };

  return (
    <>
      <div>
        Hebrew:
        <ReactJewishDatePicker
          value={basicJewishDate}
          isHebrew
          onClick={(day: BasicJewishDay) => {
            setBasicJewishDay(day);
          }}
        />
      </div>
    </>
  );
}

JavaScript example:

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 (
    <ReactJewishDatePicker
      value={new Date()}
      isHebrew
      onClick={(day) => {
        setBasicJewishDay(day);
      }}
    />
  );
}

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 | | isIsrael | Optional. Whether holidays follow the Israeli calendar rather than the diaspora one. Only affects showHolidays. Default is true | 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) | | showHolidays | Optional. Mark holidays in the calendar. Default is false | false | true | | showShabbat | Optional. Highlight shabbat in the calendar. Default is true | false | true | | value | Optional. Initial selected date | Date | BasicJewishDate | BasicJewishDateRange | DateRange |

showHolidays prop

Marks yom tov, chol hamoed, rosh chodesh, chanukah, purim and fast days in the calendar. Each day cell gets a marker dot, the holiday name is added to its tooltip and accessible name (in Hebrew when isHebrew), and class names are added so you can restyle them.

Fast days are named specifically — Tisha BeAv, Taanit Esther, תשעה באב — and a fast that falls on shabbat is marked on the day it is actually observed, not on the shabbat. Purim and Shushan Purim are distinguished likewise.

The classes:

hasHoliday, isYomTov, isErevYomTov, isCholHaMoed, isRoshChodesh, isChanukah, isPurim, isTzom.

hasHoliday is set for the observances above but not for a plain shabbat, so the marker stays meaningful — shabbat has its own showShabbat prop. Pass isIsrael={false} for the diaspora, which adds the second day of yom tov.

<ReactJewishDatePicker
  value={new Date()}
  isHebrew
  showHolidays
  onClick={(day) => setBasicJewishDay(day)}
/>

Holiday data comes from the jewish-holidays package, which resolves the names in both languages itself. For finer control, jewish-dates-core exports getHolidayInfo, getHolidayNames, getTzomInfo and getHolidayClassNames directly.

showShabbat prop

On by default. Shabbat is given a light background tint, and gets an isShabbat class; friday gets an isErevShabbat class, which ships unstyled so you can decide what to do with it. Restyle either through those classes:

.monthContainer .day.isErevShabbat {
  font-style: italic;
}

This is independent of showHolidays — shabbat only needs a day-of-week check, no holiday lookup, which is why it can be on by default at no cost. A shabbat that is also yom tov carries both sets of classes. The accessible name is left as the plain date, since the marked column already conveys it visually.

Pass showShabbat={false} to drop both classes entirely:

<ReactJewishDatePicker
  value={new Date()}
  showShabbat={false}
  onClick={(day) => setBasicJewishDay(day)}
/>

canSelect prop

The canSelect can take either a costum function 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

dontSelectShabat(day: BasicJewishDay) ⇒ boolean

A function to be passed to the canSelect prop, in order to prevent shabat selection.

See example here

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

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

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

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

jewish-dates-core

To create a jewish date picker in vue.js or angular, see our core dependency.

jewish-date

If you only need the hebrew date convertor without a date picker you can use jewish-date.

Contributors

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger

License: MIT