react-jewish-datepicker

React Joodse Date Picker

Algemene Joodse Date Picker-component die werkt met React en Hebreeuws en Engels ondersteunt.

Zie ook de demo en documentatie pagina.

Installatie

yarn add react-jewish-datepicker

Of met npm

npm install react-jewish-datepicker --save

Importeer de css

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

of met css

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

Gebruik

#### TypeScript voorbeeld:

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 naam | Beschrijving | Waardetypen | | --------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Accepteert een functie die bepaalt of een dag selecteerbaar is | (day: BasicJewishDay) => condition ? false : true | | isHebrew | Optioneel. Of de weergavetaal Hebreeuws of Engels is, standaard is false | false \| true | | isRange | Optioneel. Sta het selecteren van datumbereiken toe. Standaard is false | false \| true | | onClick | Callback wanneer een datum geselecteerd wordt | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay)| | value | Optioneel. Initieel geselecteerde datum | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

canSelect prop

De canSelect kan een aangepaste functie of een van de ingebouwde functies zoals hieronder nemen.

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

Neemt de isIsrael parameter en retourneert een functie die aan de canSelect prop wordt doorgegeven, om te voorkomen dat feestdagen (overeenkomstig met isIsrael parameter) geselecteerd worden.

| Parameter | Type | Standaard | | --------- | ------- | --------- | | isIsrael | boolean | false |

Zie voorbeeld hier

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

Een functie die aan de canSelect prop wordt doorgegeven om te voorkomen dat de sjabbat geselecteerd wordt.

Zie voorbeeld hier

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

Neemt de isIsrael parameter en retourneert een functie die aan de "canSelect" prop wordt doorgegeven. Combineert dontSelectHolidays en dontSelectShabat om zowel de sjabbat als feestdagen te blokkeren voor selectie.

| Parameter | Type | Standaard | | --------- | ------- | --------- | | isIsrael | boolean | false |

Zie voorbeeld hier

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

Neemt een minimumdatum en maximumdatum en retourneert een functie die aan de "canSelect"-prop kan worden doorgegeven om selectie buiten het opgegeven bereik te voorkomen.

Je kunt een datum doorgeven voor slechts één van de parameters en null voor de ander. In dit geval is het selecteerbare bereik tot aan de maximumdatum of vanaf de minimumdatum.

| Param | Type | | ----- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

Zie voorbeeld hier

Hulpfuncties

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

een hulpfunctie voor dontSelectOutOfRange.

Neemt een BasicJewishDate-object of een Date, telt een datuminterval (numDays) op bij de datum en retourneert vervolgens de nieuwe datum.

| Param | Type | | ----- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Zie voorbeeld hier

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

een hulpfunctie voor dontSelectOutOfRange.

Neemt een BasicJewishDate-object of een Date, trekt een datuminterval (numDays) af van de datum en retourneert vervolgens de nieuwe datum.

| Param | Type | | ----- | ------ | | date | BasicJewishDate \| Date |

| numDays | number |

Zie een voorbeeld hier

jewish-dates-core

Om een joodse datumkiezer te maken in vue.js of angular, zie onze core dependency.

jewish-date

Als je alleen de Hebreeuwse datumconverter nodig hebt zonder een datumkiezer, kun je jewish-date gebruiken.

Bijdragers

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger