react-jewish-datepicker

React Jüdischer Date Picker

Allgemeiner jüdischer Date Picker-Komponente, die mit React funktioniert und Hebräisch sowie Englisch unterstützt.

Siehe auch die Demo und Dokumentationsseite.

Installation

yarn add react-jewish-datepicker

Oder mit npm

npm install react-jewish-datepicker --save

Importieren Sie das CSS

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

oder mit CSS

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

Verwendung

#### TypeScript-Beispiel:

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);
          }}
        />
      
    
  );
}

#### 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 (
     {
        setBasicJewishDay(day);
      }}
    />
  );
}

Props

| Prop-Name | Beschreibung | Wertetypen | | -----------| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Akzeptiert eine Funktion, die bestimmt, ob ein Tag auswählbar ist | (day: BasicJewishDay) => condition ? false : true | | isHebrew | Optional. Ob die Ansichtssprache Hebräisch oder Englisch ist, Standard false | false \| true | | isRange | Optional. Erlaubt die Auswahl von Datumsbereichen. Standard ist false | false \| true | | onClick | Callback, wenn ein Datum ausgewählt wird | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay)| | value | Optional. Anfangsausgewähltes Datum | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

canSelect Prop

Die canSelect-Eigenschaft kann entweder eine eigene Funktion oder eine der eingebauten Funktionen wie folgt annehmen.

#### dontSelectHolidays([isIsrael: boolean]) ⇒ (day: BasicJewishDay) => boolean

Nimmt den Parameter isIsrael und gibt eine Funktion zurück, die an das canSelect-Prop übergeben wird, um die Auswahl von Feiertagen (entsprechend dem isIsrael-Parameter) zu verhindern.

| Param | Typ | Standard | | -------- | -------- | -------- | | isIsrael | boolean| false |

Siehe Beispiel hier

#### dontSelectShabat(day: BasicJewishDay) ⇒ boolean

Eine Funktion, die an das canSelect-Prop übergeben wird, um die Auswahl von Schabbat zu verhindern.

Siehe Beispiel hier

#### dontSelectShabatAndHolidays([isIsrael: boolean]) ⇒ (day: BasicJewishDay) => boolean

Nimmt den Parameter isIsrael und gibt eine Funktion zurück, die an das "canSelect"-Prop übergeben wird. Kombiniert dontSelectHolidays und dontSelectShabat, um sowohl die Auswahl von Schabbat als auch von Feiertagen zu verhindern.

| Param | Typ | Standard | | -------- | -------- | -------- | | isIsrael | boolean| false |

Siehe Beispiel hier

#### dontSelectOutOfRange(minDate: Date | null, maxDate: Date | null) ⇒ (day: BasicJewishDay) => boolean

Nimmt ein Mindest- und Höchstdatum und gibt eine Funktion zurück, die an die "canSelect"-Eigenschaft übergeben wird, um die Auswahl außerhalb des angegebenen Bereichs zu verhindern.

Sie können nur für einen der Parameter ein Datum und für den anderen null übergeben. In diesem Fall ist der auswählbare Bereich bis zum Höchstdatum oder ab dem Mindestdatum.

| Parameter | Typ | | --------- | ----- | | minDate | Date \| null | | maxDate | Date \| null |

Siehe Beispiel hier

Hilfsfunktionen

#### addDates(date: BasicJewishDate | Date, numDays: number) ⇒ Date

Eine Hilfsfunktion für dontSelectOutOfRange.

Nimmt ein BasicJewishDate-Objekt oder ein Date, addiert ein Datumsintervall (numDays) zum Datum und gibt dann das neue Datum zurück.

| Parameter | Typ | | --------- | ----- | | date | BasicJewishDate \| Date | | numDays | number |

Siehe Beispiel hier

#### subtractDates(date: BasicJewishDate | Date, numDays: number) ⇒ Date

Eine Hilfsfunktion für dontSelectOutOfRange.

Nimmt ein BasicJewishDate-Objekt oder ein Date, subtrahiert ein Datumsintervall (numDays) vom Datum und gibt dann das neue Datum zurück.

| Parameter | Typ | | --------- | ----- | | date | BasicJewishDate \| Date | | numDays | number |

Siehe Beispiel hier

jewish-dates-core

Um einen jüdischen Datumsauswähler in vue.js oder angular zu erstellen, siehe unsere Kern-Abhängigkeit.

jewish-date

Wenn Sie nur den hebräischen Datumskonverter ohne Datumsauswähler benötigen, können Sie jewish-date verwenden.

Mitwirkende

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger

--- Tranlated By Open Ai Tx | Last indexed: 2026-07-27 ---