react-jewish-datepicker

리액트 유대력 날짜 선택기

리액트에서 동작하며 히브리어와 영어를 지원하는 일반적인 유대력 날짜 선택기 컴포넌트입니다.

데모 및 문서 페이지도 참고하세요.

설치

yarn add react-jewish-datepicker

npm install react-jewish-datepicker --save

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

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

사용법

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

| Prop name | 설명 | 값 타입 | | --------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | canSelect | 특정 날짜를 선택할 수 있는지 여부를 결정하는 함수를 받습니다 | (day: BasicJewishDay) => condition ? false : true | | isHebrew | 선택 사항. 뷰 언어가 히브리어인지 영어인지, 기본값은 false | false \| true | | isRange | 선택 사항. 날짜 범위 선택 허용 여부. 기본값은 false | false \| true | | onClick | 날짜가 선택될 때 호출되는 콜백 | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | 선택 사항. 초기 선택된 날짜 | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

canSelect prop

canSelect는 사용자 정의 함수 또는 다음과 같은 내장 함수 중 하나를 사용할 수 있습니다.

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

isIsrael 매개변수를 받아서, 해당 isIsrael 매개변수에 따라 휴일 선택을 방지하기 위해 canSelect prop에 전달되는 함수를 반환합니다.

| 매개변수 | 타입 | 기본값 | | -------- | -------- | ------ | | isIsrael | boolean | false |

예제는 여기에서 확인하세요.

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

shabat 선택을 방지하기 위해 canSelect prop에 전달되는 함수입니다.

예제는 여기에서 확인하세요.

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

isIsrael 매개변수를 받아서, "canSelect" prop에 전달할 함수를 반환합니다. dontSelectHolidays와 dontSelectShabat를 결합하여 shabat과 휴일 선택을 모두 방지합니다.

| 매개변수 | 타입 | 기본값 | | -------- | -------- | ------ | | isIsrael | boolean | false |

예제는 여기에서 확인하세요.

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

최소 날짜와 최대 날짜를 받아 "canSelect" 속성에 전달할 함수를 반환하여 지정된 범위를 벗어난 선택을 방지합니다.

매개변수 중 하나에만 날짜를 전달하고 다른 하나에는 null을 전달할 수 있습니다. 이 경우 선택 가능한 범위는 최대 날짜까지 또는 최소 날짜부터가 됩니다.

| 매개변수 | 타입 | | ----- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

예제는 여기에서 확인하세요.

헬퍼 함수

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

dontSelectOutOfRange를 위한 헬퍼 함수입니다.

BasicJewishDate 객체 또는 Date를 받아 날짜 간격(numDays)을 더한 후 새 날짜를 반환합니다.

| 매개변수 | 타입 | | ----- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

예제는 여기에서 확인하세요.

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

dontSelectOutOfRange를 위한 헬퍼 함수입니다.

BasicJewishDate 객체 또는 Date를 받아 날짜 간격(numDays)을 뺀 후 새 날짜를 반환합니다.

| 매개변수 | 타입 | | ----- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

예제는 여기에서 확인하세요.

jewish-dates-core

vue.js 또는 angular에서 유대인 날짜 선택기를 만들려면, 우리의 코어 의존성을 참조하세요.

jewish-date

날짜 선택기 없이 히브리 날짜 변환기만 필요하면 jewish-date를 사용할 수 있습니다.

기여자

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger