react-jewish-datepicker

Sélecteur de Date Hébraïque React

Composant général de sélection de date hébraïque fonctionnant avec React et prenant en charge l'hébreu et l'anglais.

Voir également la démonstration et la documentation de la page.

Installation

yarn add react-jewish-datepicker

npm install react-jewish-datepicker --save

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

ou avec css

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

Utilisation

#### Exemple TypeScript :

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

| Nom de la prop | Description | Types de valeurs | | -------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Accepte une fonction qui détermine si un jour est sélectionnable | (day: BasicJewishDay) => condition ? false : true | | isHebrew | Optionnel. Indique si la langue de la vue est hébreu ou anglais, par défaut false | false \| true | | isRange | Optionnel. Permet de sélectionner des plages de dates. Par défaut false | false \| true | | onClick | Callback lorsqu’une date est sélectionnée | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | Optionnel. Date sélectionnée initiale | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Prop canSelect

La prop canSelect peut prendre soit une fonction personnalisée soit une des fonctions intégrées suivantes.

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

Prend un paramètre isIsrael et retourne une fonction qui est ensuite passée à la prop canSelect, afin d’empêcher la sélection des jours fériés (correspondant au paramètre isIsrael).

| Paramètre | Type | Par défaut | | --------- | --------- | ---------- | | isIsrael | boolean | false |

Voir l’exemple ici

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

Fonction à passer à la prop canSelect afin d’empêcher la sélection du shabbat.

Voir l’exemple ici

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

Prend un paramètre isIsrael et retourne une fonction à passer à la prop canSelect. Combine dontSelectHolidays et dontSelectShabat afin d’empêcher la sélection à la fois du shabbat et des jours fériés.

| Paramètre | Type | Par défaut | | --------- | --------- | ---------- | | isIsrael | boolean | false |

Voir l'exemple ici

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

Prend une date minimale et une date maximale et retourne une fonction à passer à la propriété "canSelect", afin d'empêcher la sélection en dehors de la plage fournie.

Vous pouvez passer une date uniquement pour un des paramètres et null pour l'autre. Dans ce cas, la plage sélectionnable sera jusqu'à la date maximale ou à partir de la date minimale.

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

Voir l'exemple ici

Fonctions d'aide

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

une fonction d'aide pour dontSelectOutOfRange.

Prend un objet BasicJewishDate ou une Date, ajoute un intervalle de jours (numDays) à la date puis retourne la nouvelle date.

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

Voir l'exemple ici

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

une fonction d'aide pour dontSelectOutOfRange.

Prend un objet BasicJewishDate ou une Date, soustrait un intervalle de jours (numDays) à la date puis retourne la nouvelle date.

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

Voir l'exemple ici

jewish-dates-core

Pour créer un sélecteur de date juive en vue.js ou angular, consultez notre dépendance principale.

jewish-date

Si vous avez seulement besoin du convertisseur de date hébraïque sans sélecteur de date, vous pouvez utiliser jewish-date.

Contributeurs

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger