react-jewish-datepicker

Selector de Fecha Judía para React

Componente general de selector de fecha judía que funciona con React y soporta hebreo e inglés.

Consulte también la página de demostración y documentación.

Instalación

yarn add react-jewish-datepicker

O con npm

npm install react-jewish-datepicker --save

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

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

Uso

#### Ejemplo en 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

| Nombre de Prop | Descripción | Tipos de valor | | -------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | canSelect | Acepta una función que determina si un día es seleccionable | (day: BasicJewishDay) => condition ? false : true | | isHebrew | Opcional. Si el idioma de la vista es hebreo o inglés, por defecto es false | false \| true | | isRange | Opcional. Permite seleccionar rangos de fechas. Por defecto es false | false \| true | | onClick | Callback cuando se selecciona una fecha | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | Opcional. Fecha seleccionada inicial | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Propiedad canSelect

El canSelect puede tomar una función personalizada o una de las funciones integradas como sigue.

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

Recibe el parámetro isIsrael y devuelve una función que a su vez se pasa a la propiedad canSelect, para evitar la selección de días festivos (correspondientes con el parámetro isIsrael).

| Parámetro | Tipo | Predeterminado | | --------- | ------- | -------------- | | isIsrael | boolean | false |

Ver ejemplo aquí

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

Función para pasar a la propiedad canSelect, para evitar la selección de shabat.

Ver ejemplo aquí

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

Recibe el parámetro isIsrael y devuelve una función para pasar a la propiedad canSelect. Combina dontSelectHolidays y dontSelectShabat para evitar la selección tanto de shabat como de días festivos.

| Parámetro | Tipo | Predeterminado | | --------- | ------- | -------------- | | isIsrael | boolean | false |

Vea el ejemplo aquí

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

Toma una fecha mínima y una fecha máxima y devuelve una función para pasar a la propiedad "canSelect", con el fin de evitar la selección fuera del rango suministrado.

Puede pasar una fecha solo para uno de los parámetros y null para el otro. En este caso, el rango seleccionable será hasta la fecha máxima o desde la fecha mínima.

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

Vea el ejemplo aquí

Funciones Auxiliares

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

una función auxiliar para dontSelectOutOfRange.

Toma un objeto BasicJewishDate o una Date, añade un intervalo de días (numDays) a la fecha y luego devuelve la nueva fecha.

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

Vea el ejemplo aquí

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

una función auxiliar para dontSelectOutOfRange.

Toma un objeto BasicJewishDate o una Date, resta un intervalo de días (numDays) a la fecha y luego devuelve la nueva fecha.

| Param | Tipo | | ----- | ------ | | date | BasicJewishDate \| Date | | numDays | número |

Ver ejemplo aquí

jewish-dates-core

Para crear un selector de fechas judías en vue.js o angular, vea nuestra dependencia central.

jewish-date

Si solo necesita el convertidor de fecha hebrea sin un selector de fechas, puede usar jewish-date.

Colaboradores

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger