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

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.

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.

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.

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.

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.

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