react-jewish-datepicker

Seletor de Data Judaica React

Componente geral de seletor de data judaica que funciona com React e suporta hebraico e inglês.

Veja também a página de demonstração e documentação.

Instalação

yarn add react-jewish-datepicker

Ou com npm

npm install react-jewish-datepicker --save

Importe o css

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

ou com css

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

Uso

#### Exemplo em 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 do Prop | Descrição | Tipos de Valor | | ------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Aceita uma função que determina se um dia é selecionável | (day: BasicJewishDay) => condição ? false : true | | isHebrew | Opcional. Define se o idioma da visualização é hebraico ou inglês. Padrão é false | false \| true | | isRange | Opcional. Permite selecionar intervalos de datas. Padrão é false | false \| true | | onClick | Callback quando uma data é selecionada | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | Opcional. Data inicial selecionada | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Prop canSelect

O canSelect pode receber tanto uma função personalizada quanto uma das funções internas, conforme abaixo.

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

Recebe o parâmetro isIsrael e retorna uma função que é passada para o prop canSelect, para evitar a seleção de feriados (de acordo com o parâmetro isIsrael).

| Param | Tipo | Padrão | | ------- | -------- | ------- | | isIsrael| boolean| false |

Veja exemplo aqui

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

Uma função a ser passada para o prop canSelect, para evitar a seleção do shabat.

Veja exemplo aqui

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

Recebe o parâmetro isIsrael e retorna uma função a ser passada para o prop "canSelect". Combina dontSelectHolidays e dontSelectShabat para evitar a seleção tanto de shabat quanto de feriados.

| Param | Tipo | Padrão | | ------- | -------- | ------- | | isIsrael| boolean| false |

Veja o exemplo aqui

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

Recebe uma data mínima e uma data máxima e retorna uma função a ser passada para a prop "canSelect", a fim de impedir a seleção fora do intervalo fornecido.

Você pode passar uma data apenas para um dos parâmetros e null para o outro. Nesse caso, o intervalo selecionável será até a data máxima ou a partir da data mínima.

| Parâmetro | Tipo | | --------- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

Veja o exemplo aqui

Funções Auxiliares

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

uma função auxiliar para dontSelectOutOfRange.

Recebe um objeto BasicJewishDate ou um Date, adiciona um intervalo de datas (numDays) à data e então retorna a nova data.

| Parâmetro | Tipo | | --------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Veja o exemplo aqui

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

uma função auxiliar para dontSelectOutOfRange.

Recebe um objeto BasicJewishDate ou um Date, subtrai um intervalo de datas (numDays) da data e então retorna a nova data.

| Parâmetro | Tipo | | --------- | ------ | | date | BasicJewishDate \| Date |

| numDays | number |

Veja o exemplo aqui

jewish-dates-core

Para criar um seletor de datas judaicas em vue.js ou angular, veja nossa dependência core.

jewish-date

Se você só precisa do conversor de datas hebraicas sem um seletor de datas, pode usar o jewish-date.

Contribuidores

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger