react-jewish-datepicker

Reactowy Żydowski Date Picker

Ogólny komponent żydowskiego selektora dat, działający z Reactem i obsługujący hebrajski oraz angielski.

Zobacz także stronę demonstracyjną i dokumentację.

Instalacja

yarn add react-jewish-datepicker

Lub za pomocą npm

npm install react-jewish-datepicker --save

Zaimportuj css

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

lub za pomocą CSS

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

Użycie

#### Przykład 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

| Nazwa propsa | Opis | Typy wartości | | ------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Przyjmuje funkcję określającą, czy dzień jest wybieralny | (day: BasicJewishDay) => warunek ? false : true | | isHebrew | Opcjonalne. Czy język widoku jest hebrajski czy angielski, domyślnie false | false \| true | | isRange | Opcjonalne. Pozwala na wybór zakresów dat. Domyślnie false | false \| true | | onClick | Callback po wybraniu daty | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | Opcjonalne. Początkowa wybrana data | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Prop canSelect

Prop canSelect może przyjmować funkcję niestandardową lub jedną z wbudowanych funkcji opisanych poniżej.

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

Przyjmuje parametr isIsrael i zwraca funkcję, którą przekazuje się do propsa canSelect, aby zapobiec wybieraniu świąt (zgodnych z parametrem isIsrael).

| Parametr | Typ | Domyślnie | | -------- | -------- | --------- | | isIsrael | boolean| false |

Zobacz przykład tutaj

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

Funkcja przekazywana do propsa canSelect, aby zapobiec wybieraniu szabatów.

Zobacz przykład tutaj

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

Przyjmuje parametr isIsrael i zwraca funkcję przekazywaną do propsa "canSelect". Łączy dontSelectHolidays oraz dontSelectShabat, aby zapobiec wybieraniu zarówno szabatów, jak i świąt.

| Parametr | Typ | Domyślnie | | -------- | -------- | --------- | | isIsrael | boolean| false |

Zobacz przykład tutaj

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

Przyjmuje minimalną i maksymalną datę i zwraca funkcję do przekazania do właściwości "canSelect", aby zapobiec wyborowi dat spoza podanego zakresu.

Możesz podać datę tylko dla jednego z parametrów, a drugiemu przypisać wartość null. W takim przypadku zakres wybieralnych dat będzie do maksymalnej daty lub od minimalnej daty.

| Parametr | Typ | | -------- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

Zobacz przykład tutaj

Funkcje pomocnicze

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

funkcja pomocnicza dla dontSelectOutOfRange.

Przyjmuje obiekt BasicJewishDate lub Date, dodaje do daty interwał (numDays) i zwraca nową datę.

| Parametr | Typ | | -------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Zobacz przykład tutaj

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

funkcja pomocnicza dla dontSelectOutOfRange.

Przyjmuje obiekt BasicJewishDate lub Date, odejmuje od daty interwał (numDays) i zwraca nową datę.

| Parametr | Typ | | -------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Zobacz przykład tutaj

jewish-dates-core

Aby utworzyć żydowski date picker w vue.js lub angular, zobacz nasze główne zależności.

jewish-date

Jeśli potrzebujesz tylko konwertera dat hebrajskich bez wybieracza dat, możesz użyć jewish-date.

Współtwórcy

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger