react-jewish-datepicker

React Jewish Date Picker

Componente generale di selezione della data ebraica che funziona con React e supporta ebraico e inglese.

Consulta anche la pagina di demo e documentazione.

Installazione

yarn add react-jewish-datepicker

Oppure con npm

npm install react-jewish-datepicker --save

Importa il css

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

o con css

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

Utilizzo

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

| Nome Prop | Descrizione | Tipi di valore | | --------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Accetta una funzione che determina se un giorno è selezionabile | (day: BasicJewishDay) => condition ? false : true | | isHebrew | Opzionale. Indica se la lingua della vista è ebraica o inglese, Default è false | false \| true | | isRange | Opzionale. Permette di selezionare intervalli di date. Default è false | false \| true | | onClick | Callback quando una data viene selezionata | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay)| | value | Opzionale. Data iniziale selezionata | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Prop canSelect

La proprietà canSelect può accettare sia una funzione personalizzata sia una delle funzioni integrate come segue.

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

Accetta il parametro isIsrael e restituisce una funzione che viene passata alla prop canSelect, per impedire la selezione dei giorni festivi (corrispondenti al parametro isIsrael).

| Parametro | Tipo | Default | | --------- | -------- | ------- | | isIsrael | boolean| false |

Vedi esempio qui

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

Una funzione da passare alla prop canSelect, per impedire la selezione dello shabat.

Vedi esempio qui

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

Accetta il parametro isIsrael e restituisce una funzione da passare alla prop "canSelect". Combina dontSelectHolidays e dontSelectShabat per impedire sia la selezione dello shabat che dei giorni festivi.

| Parametro | Tipo | Default | | --------- | -------- | ------- | | isIsrael | boolean| false |

Vedi esempio qui

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

Accetta una data minima e una data massima e restituisce una funzione da passare al prop "canSelect", al fine di impedire la selezione al di fuori dell'intervallo fornito.

Puoi passare una data solo per uno dei parametri e null per l'altro. In questo caso, l'intervallo selezionabile sarà fino alla data massima o dalla data minima.

| Parametro | Tipo | | --------- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

Vedi esempio qui

Funzioni di Supporto

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

una funzione di supporto per dontSelectOutOfRange.

Accetta un oggetto BasicJewishDate o una Date, aggiunge un intervallo di giorni (numDays) alla data e restituisce la nuova data.

| Parametro | Tipo | | --------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Vedi esempio qui

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

una funzione di supporto per dontSelectOutOfRange.

Accetta un oggetto BasicJewishDate o una Date, sottrae un intervallo di giorni (numDays) dalla data e restituisce la nuova data.

| Parametro | Tipo | | --------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Vedi esempio qui

jewish-dates-core

Per creare un selettore di date ebraiche in vue.js o angular, consulta la nostra dipendenza core.

jewish-date

Se hai bisogno solo del convertitore di date ebraiche senza un selettore di date puoi usare jewish-date.

Contributori

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger