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 | คำอธิบาย | ประเภทค่า | | --------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | canSelect | รับฟังก์ชันที่กำหนดว่าวันนั้นสามารถเลือกได้หรือไม่ | (day: BasicJewishDay) => เงื่อนไข ? false : true | | isHebrew | ไม่บังคับ. กำหนดว่าภาษาของมุมมองเป็นภาษาฮิบรูหรืออังกฤษ ค่าเริ่มต้นคือ false | false \| true | | isRange | ไม่บังคับ. อนุญาตให้เลือกช่วงวันที่ ค่าเริ่มต้นคือ false | false \| true | | onClick | callback เมื่อวันที่ถูกเลือก | (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 และคืนค่าฟังก์ชันซึ่งจะถูกส่งไปยัง prop canSelect เพื่อป้องกันการเลือกวันหยุด (ตามค่าพารามิเตอร์ isIsrael)

| พารามิเตอร์ | ประเภท | ค่าเริ่มต้น | | ----- | ------ | ----- | | isIsrael | boolean | false |

ดูตัวอย่าง ที่นี่

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

ฟังก์ชันที่จะถูกส่งไปยัง prop canSelect เพื่อป้องกันการเลือกวันชับบาต

ดูตัวอย่าง ที่นี่

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

รับพารามิเตอร์ isIsrael และคืนค่าฟังก์ชันที่จะถูกส่งไปยัง prop "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 | number |

ดูตัวอย่าง ที่นี่

jewish-dates-core

หากต้องการสร้างตัวเลือกวันที่ยิวใน vue.js หรือ angular ดู core dependency ของเรา

jewish-date

หากคุณต้องการเพียงตัวแปลงวันที่ฮีบรูโดยไม่ต้องเลือกวันที่ คุณสามารถใช้ jewish-date ได้

ผู้มีส่วนร่วม

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger

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