react-jewish-datepicker

React Jewish Date Picker

通用犹太日期选择器组件，适用于 React，并支持希伯来语和英语。

另见 演示和文档 页面。

安装

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);
      }}
    />
  );
}

属性

| 属性名 | 说明 | 值类型 | | ---------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | 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 属性

canSelect 可以接受一个自定义函数或以下内置函数之一。

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

接受 isIsrael 参数并返回一个函数，该函数传递给 canSelect 属性，用于禁止选择节假日（与 isIsrael 参数对应）。

| 参数 | 类型 | 默认值 | | -------- | ----------- | ------- | | isIsrael | boolean | false |

示例见这里

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

一个传递给 canSelect 属性的函数，用于禁止选择安息日。

示例见这里

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

接受 isIsrael 参数并返回一个函数，传递给 canSelect 属性。结合 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 | 数字 |

示例见这里

jewish-dates-core

要在 vue.js 或 angular 中创建犹太日期选择器，请参见我们的核心依赖。

jewish-date

如果您只需要希伯来日期转换器而不需要日期选择器，可以使用jewish-date。

贡献者

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger

--- Tranlated By Open Ai Tx | Last indexed: 2026-07-27 ---