react-jewish-datepicker

React 猶太日期選擇器

通用的猶太日期選擇器組件，可與 React 一起使用，並支援希伯來語和英語。

另請參見 示範與文件 頁面。

安裝

yarn add react-jewish-datepicker

或使用 npm

npm install react-jewish-datepicker --save

導入 CSS

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

或使用 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 名稱 | 說明 | 值類型 | | --------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | | 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 參數並回傳一個函數，此函數傳給 canSelect prop，以避免選擇節日（根據 isIsrael 參數）。

| 參數 | 類型 | 預設值 | | ------ | -------- | ------- | | isIsrael | boolean | false |

範例請見 這裡

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

傳給 canSelect prop 的函數，用以禁止選擇安息日。

範例請見 這裡

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

接收 isIsrael 參數並回傳一個函數，傳給 "canSelect" prop。結合 dontSelectHolidays 與 dontSelectShabat，以禁止選擇安息日與節日。

| 參數 | 類型 | 預設值 | | ------ | -------- | ------- | | 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