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