react-jewish-datepicker

Bộ chọn ngày Do Thái cho React

Thành phần bộ chọn ngày Do Thái tổng quát hoạt động với react và hỗ trợ tiếng Hebrew và tiếng Anh.

Xem thêm trang demo và tài liệu.

Cài đặt

yarn add react-jewish-datepicker

Hoặc với npm

npm install react-jewish-datepicker --save

Nhập khẩu css

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

hoặc với css

@import url("react-jewish-datepicker/dist/index.css");

Sử dụng

#### Ví dụ 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

| Tên thuộc tính | Mô tả | Kiểu giá trị | | -------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | canSelect | Nhận một hàm xác định xem một ngày có thể chọn được không | (day: BasicJewishDay) => điều kiện ? false : true | | isHebrew | Không bắt buộc. Ngôn ngữ giao diện là tiếng Hebrew hoặc tiếng Anh, mặc định là false | false \| true | | isRange | Không bắt buộc. Cho phép chọn khoảng ngày. Mặc định là false | false \| true | | onClick | Callback khi một ngày được chọn | (day: BasicJewishDay) => console.log(day) \| (startDay: BasicJewishDay, endDay: BasicJewishDay) => console.log(startDay, endDay) | | value | Không bắt buộc. Ngày được chọn ban đầu | Date \| BasicJewishDate \| BasicJewishDateRange \| DateRange |

Thuộc tính canSelect

Thuộc tính canSelect có thể nhận một hàm tùy chỉnh hoặc một trong các hàm dựng sẵn như sau.

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

Nhận tham số isIsrael và trả về một hàm sẽ được truyền vào thuộc tính canSelect, nhằm ngăn không cho chọn các ngày lễ (tương ứng với tham số isIsrael).

| Tham số | Kiểu | Mặc định | | -------- | -------- | -------- | | isIsrael | boolean| false |

Xem ví dụ tại đây

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

Một hàm sẽ được truyền vào thuộc tính canSelect, nhằm ngăn không cho chọn ngày Shabat.

Xem ví dụ tại đây

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

Nhận tham số isIsrael và trả về một hàm truyền vào thuộc tính "canSelect". Kết hợp dontSelectHolidays và dontSelectShabat để ngăn không cho chọn cả ngày Shabat và ngày lễ.

| Tham số | Kiểu | Mặc định | | -------- | -------- | -------- | | isIsrael | boolean| false |

Xem ví dụ tại đây

#### dontSelectOutOfRange(minDate: Date | null, maxDate: Date | null) ⇒ (day: BasicJewishDay) => boolean

Nhận ngày tối thiểu và ngày tối đa, trả về một hàm để truyền cho thuộc tính "canSelect", nhằm ngăn việc chọn ngày nằm ngoài phạm vi đã cung cấp.

Bạn có thể chỉ truyền ngày cho một trong hai tham số và để tham số còn lại là null. Trong trường hợp này, phạm vi có thể chọn sẽ là đến ngày tối đa hoặc từ ngày tối thiểu.

| Tham số | Kiểu | | ------- | ------ | | minDate | Date \| null | | maxDate | Date \| null |

Xem ví dụ tại đây

Hàm Hỗ Trợ

#### addDates(date: BasicJewishDate | Date, numDays: number) ⇒ Date

một hàm hỗ trợ cho dontSelectOutOfRange.

Nhận một đối tượng BasicJewishDate hoặc một Date, cộng thêm một khoảng ngày (numDays) vào ngày đó và trả về ngày mới.

| Tham số | Kiểu | | ------- | ------ | | date | BasicJewishDate \| Date | | numDays | number |

Xem ví dụ tại đây

#### subtractDates(date: BasicJewishDate | Date, numDays: number) ⇒ Date

một hàm hỗ trợ cho dontSelectOutOfRange.

Nhận một đối tượng BasicJewishDate hoặc một Date, trừ đi một khoảng ngày (numDays) khỏi ngày đó và trả về ngày mới.

| Tham số | Kiểu | | ------- | ------ | | date | BasicJewishDate \| Date |

| numDays | number |

Xem ví dụ tại đây

jewish-dates-core

Để tạo bộ chọn ngày Do Thái trong vue.js hoặc angular, hãy xem phụ thuộc lõi của chúng tôi.

jewish-date

Nếu bạn chỉ cần bộ chuyển đổi ngày Hebrew mà không cần bộ chọn ngày, bạn có thể sử dụng jewish-date.

Người đóng góp

• Shmulik Kravitz
• Sagi Tawil
• Yochanan Sheinberger