react-jewish-datepicker

منتقي التاريخ اليهودي React

مكوّن منتقي التاريخ اليهودي العام الذي يعمل مع React ويدعم اللغتين العبرية والإنجليزية.

راجع أيضًا صفحة العرض التوضيحي والتوثيق.

التثبيت

yarn add react-jewish-datepicker

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

الخصائص

| اسم الخاصية | الوصف | أنواع القيم | | ----------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | canSelect | تقبل دالة تحدد ما إذا كان اليوم قابلًا للاختيار | (day: BasicJewishDay) => الشرط ? 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 | number |

انظر المثال هنا

jewish-dates-core

لإنشاء منتقي تواريخ يهودية في vue.js أو angular، راجع الاعتماد الأساسي.

jewish-date

إذا كنت بحاجة فقط إلى محول التاريخ العبري بدون منتقي تواريخ، يمكنك استخدام jewish-date.

المساهمون

• شموئيل كرافيتز
• ساجي تاويل
• يوحنان شاينبرجر