react-jewish-datepicker

React Jewish Date Picker

Reactで動作し、ヘブライ語と英語に対応した一般的なユダヤ暦日付ピッカーコンポーネントです。

デモとドキュメントページもご参照ください。

インストール

yarn add react-jewish-datepicker

npm install react-jewish-datepicker --save

cssをインポートする

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 パラメータを取り、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 |

例はこちらをご覧ください here

jewish-dates-core

vue.jsやangularでユダヤ暦日付ピッカーを作成するには、当社のコア依存関係をご覧ください。

jewish-date

日付ピッカーなしでヘブライ日付変換器のみが必要な場合は、jewish-dateを使用できます。

貢献者

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger