{props.value}
;
9 | };
10 |
--------------------------------------------------------------------------------
/packages/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './app'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
17 |
22 | );
23 | };
--------------------------------------------------------------------------------
/config/utils/tsUtils.ts:
--------------------------------------------------------------------------------
1 | import { build as tscBuild} from "tsc-prog";
2 |
3 | export async function buildDeclarations(basePath: string, tsconfigPath: string, srcPath: string, declarationsOutPath: string) {
4 | return new Promise
65 |
89 | );
90 | };
--------------------------------------------------------------------------------
/packages/reactJewishDatePicker/src/navigation.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | getJewishMonths,
3 | getJewishYears,
4 | getPrevMonth,
5 | getNextMonth,
6 | JewishMonth,
7 | } from "jewish-dates-core";
8 | import { getTestID } from "./utils";
9 | import { convertNumberToHebrew } from "jewish-date";
10 | import { useCallback, memo } from "react";
11 |
12 | export interface NavigationProps {
13 | isHebrew?: boolean;
14 | month: string;
15 | year: number;
16 | onClick: (month: string, year: number) => void;
17 | }
18 |
19 | export const Navigation: React.FC setOpen(!isOpen)}
68 | className={`selectedDate`}
69 | >
70 |
73 |
74 |
88 |
60 |
109 | );
110 | }
111 | );
112 |
--------------------------------------------------------------------------------
/packages/reactJewishDatePicker/src/day.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {
3 | JewishDay,
4 | BasicJewishDay,
5 | JewishDate,
6 | IsJewishDatesEqual,
7 | } from "jewish-dates-core";
8 | import { isFromTest } from "./utils";
9 | import * as Dayjs from "dayjs";
10 | import isBetween from "dayjs/plugin/isBetween";
11 | import { convertNumberToHebrew } from "jewish-date";
12 | const dayjs = Dayjs.default;
13 | dayjs.extend(isBetween);
14 |
15 | export interface DayProps extends JewishDay {
16 | isHebrew?: boolean;
17 | selectedDay: BasicJewishDay;
18 | onClick: (day: BasicJewishDay) => void;
19 | onMouseOver?: (day: BasicJewishDay) => void;
20 | canSelect?: (day: BasicJewishDay) => boolean;
21 | customizeDayStyle?: (day: BasicJewishDay) => string;
22 | isRange?: boolean;
23 | startDay: BasicJewishDay;
24 | endDay: BasicJewishDay;
25 | }
26 |
27 | const isInRange = (
28 | date: Date,
29 | startDay: BasicJewishDay,
30 | endDay: BasicJewishDay
31 | ): boolean => {
32 | if (startDay && endDay) {
33 | const start = dayjs(startDay.date);
34 | const end = dayjs(endDay.date);
35 | return dayjs(date).isBetween(start, end);
36 | }
37 | return false;
38 | };
39 |
40 | const isStartDay = (date: Date, startDay: BasicJewishDay): boolean => {
41 | if (startDay) {
42 | const start = dayjs(startDay.date).startOf("d");
43 | return dayjs(date).startOf("d").isSame(start);
44 | }
45 | return false;
46 | };
47 |
48 | const isEndDay = (
49 | date: Date,
50 | startDay: BasicJewishDay,
51 | endDay: BasicJewishDay
52 | ): boolean => {
53 | if (endDay && startDay) {
54 | const day = dayjs(date).startOf("d");
55 | const start = dayjs(startDay.date).startOf("d");
56 | const end = dayjs(endDay.date).startOf("d");
57 | return day.isSame(end) && !day.isSame(start);
58 | }
59 | return false;
60 | };
61 |
62 | export const Day: React.FC
65 |
66 |
67 |
68 |
85 |
86 |
100 |
101 |
106 |
107 |
108 |
120 | {dayToDisplay}
121 |
122 | );
123 | };
124 |
--------------------------------------------------------------------------------
/config/utils/esbuildUtils.ts:
--------------------------------------------------------------------------------
1 | // import { build as esbuild, serve, BuildOptions } from "esbuild";
2 | import * as esbuild from "esbuild";
3 | import nodeExternalsPlugin from "esbuild-node-externals";
4 | import path from "path";
5 | import { Colors } from "./colorsUtils";
6 | import { buildDeclarations } from "./tsUtils";
7 | import { getFiles } from "./filesUtils";
8 |
9 | export const baseConfig: esbuild.BuildOptions = {
10 | bundle: true,
11 | sourcemap: true,
12 | // splitting: true,
13 | };
14 |
15 | export const start = async (entryPoints: string[], outdir: string) => {
16 | const start = new Date().getTime();
17 | const ctx = await esbuild.context({
18 | // plugins: [pnpPlugin()],
19 | ...baseConfig,
20 | entryPoints: entryPoints,
21 | outdir: outdir
22 | });
23 | const { host, port } = await ctx.serve({
24 | port: 3000,
25 | servedir: "./config/static",
26 | onRequest: (args) => {
27 | // console.log(args);
28 | },
29 |
30 | });
31 | console.log(`http://${host}:${port}/`);
32 | console.log(`http://127.0.0.1:${port}/`);
33 |
34 | const end = new Date().getTime();
35 | const time = end - start;
36 | console.log(
37 | Colors.FgGreen,
38 | `Started in ${(time / 1000).toFixed(5)} sec.`,
39 | Colors.Reset
40 | );
41 | // Call "stop" on the web server to stop serving
42 | // server.stop()
43 | };
44 |
45 | export const build = async (
46 | bashPath: string,
47 | tsconfigPath: string,
48 | srcPath: string,
49 | outPath: string,
50 | declarationsOutPath: string
51 | ) => {
52 | const start = new Date().getTime();
53 | const outPathEsm = path.resolve(outPath, "mjs");
54 | const entryPoints = (await getFiles(path.join(process.cwd(), "src"))).map((file) => file.replace(process.cwd(), '.'));
55 |
56 | // console.log(entryPoints);
57 | Promise.all([
58 | esbuild.build({
59 | ...baseConfig,
60 | plugins: [
61 | // pnpPlugin(),
62 | nodeExternalsPlugin(),
63 | ],
64 | entryPoints: ["./src/index.ts"],
65 | outdir: outPath,
66 | minify: true,
67 | format: "cjs",
68 | }),
69 | esbuild.build({
70 | ...baseConfig,
71 | bundle: false,
72 | plugins: [
73 | // pnpPlugin(),
74 | nodeExternalsPlugin(),
75 | ],
76 | entryPoints: entryPoints,
77 | outdir: outPathEsm,
78 | minify: true,
79 | format: "esm",
80 | target: "esnext",
81 | }),
82 | ])
83 |
84 | .then(async () => {
85 | const endBuild = new Date().getTime();
86 | const timeBuild = endBuild - start;
87 |
88 | console.log(
89 | Colors.FgGreen,
90 | `Build done in ${(timeBuild / 1000).toFixed(3)} sec.`,
91 | Colors.Reset
92 | );
93 |
94 | // https://gist.github.com/jeremyben/4de4fdc40175d0f76892209e00ece98f
95 | await buildDeclarations(
96 | bashPath,
97 | tsconfigPath,
98 | srcPath,
99 | declarationsOutPath
100 | );
101 | const end = new Date().getTime();
102 | const time = end - endBuild;
103 | console.log(
104 | Colors.FgGreen,
105 | `Build declarations done in ${(time / 1000).toFixed(3)} sec.`,
106 | Colors.Reset
107 | );
108 | })
109 | .catch((err) => {
110 | // console.error(err.error);
111 | process.exit(1);
112 | });
113 | };
114 |
115 |
116 | export const buildApp = async (
117 | bashPath: string,
118 | tsconfigPath: string,
119 | srcPath: string,
120 | outPath: string,
121 | declarationsOutPath: string
122 | ) => {
123 | const start = new Date().getTime();
124 |
125 |
126 | // console.log(entryPoints);
127 | esbuild.build({
128 | ...baseConfig,
129 | entryPoints: ["./src/index.tsx"],
130 | outdir: outPath,
131 | minify: true,
132 | format: "iife",
133 | }).then(async () => {
134 | const endBuild = new Date().getTime();
135 | const timeBuild = endBuild - start;
136 |
137 | console.log(
138 | Colors.FgGreen,
139 | `Build done in ${(timeBuild / 1000).toFixed(3)} sec.`,
140 | Colors.Reset
141 | );
142 |
143 | // https://gist.github.com/jeremyben/4de4fdc40175d0f76892209e00ece98f
144 | await buildDeclarations(
145 | bashPath,
146 | tsconfigPath,
147 | srcPath,
148 | declarationsOutPath
149 | );
150 | const end = new Date().getTime();
151 | const time = end - endBuild;
152 | console.log(
153 | Colors.FgGreen,
154 | `Build declarations done in ${(time / 1000).toFixed(3)} sec.`,
155 | Colors.Reset
156 | );
157 | })
158 | .catch((err) => {
159 | // console.error(err.error);
160 | process.exit(1);
161 | });
162 | };
163 |
--------------------------------------------------------------------------------
/packages/reactJewishDatePicker/src/month.css:
--------------------------------------------------------------------------------
1 | .monthContainer {
2 | --color: #333;
3 | --backgroundColor: #e6e6e6;
4 | display: grid;
5 | font-family: arial;
6 | cursor: pointer;
7 | height: 100%;
8 | width: 100%;
9 | grid-template-rows: auto auto 1fr;
10 | background-color: #fff;
11 | border: 1px solid #d6d9dd;
12 | border-radius: 5px;
13 | display: grid;
14 | }
15 | .monthContainer.isHebrew {
16 | direction: rtl;
17 | }
18 | .monthContainer.isHebrew .startDay {
19 | background: cornflowerblue;
20 | border-radius: 0 7px 7px 0;
21 | color: #fff;
22 | margin: 1px 0;
23 | }
24 | .monthContainer.isHebrew .endDay {
25 | background: cornflowerblue;
26 | border-radius: 7px 0 0 7px;
27 | color: #fff;
28 | margin: 1px 0;
29 | }
30 | .monthContainer.isHebrew .weekday,
31 | .monthContainer.isHebrew .day {
32 | font-size: 16px;
33 | padding: 0;
34 | }
35 | .monthContainer .navigation {
36 | display: grid;
37 | grid-template-columns: 22px 138px 22px;
38 | justify-content: space-between;
39 | min-height: 32px;
40 | padding: 5px;
41 | width: 100%;
42 | box-sizing: border-box;
43 | }
44 | .monthContainer .navigation .arrowRight,
45 | .monthContainer .navigation .arrowLeft {
46 | display: grid;
47 | align-items: center;
48 | justify-content: center;
49 | }
50 | .monthContainer .navigation .arrowRight span,
51 | .monthContainer .navigation .arrowLeft span {
52 | border: solid black;
53 | border-width: 0 2px 2px 0;
54 | padding: 1px;
55 | transform: rotate(-45deg);
56 | -webkit-transform: rotate(-45deg);
57 | cursor: pointer;
58 | width: 6px;
59 | height: 6px;
60 | }
61 | .monthContainer .navigation .arrowRight:hover,
62 | .monthContainer .navigation .arrowLeft:hover {
63 | background-color: var(--backgroundColor);
64 | }
65 | .monthContainer .navigation .arrowLeft span {
66 | transform: rotate(135deg);
67 | -webkit-transform: rotate(135deg);
68 | }
69 | .monthContainer .navigation .monthYearSelection {
70 | display: grid;
71 | grid-template-columns: auto auto;
72 | }
73 | .monthContainer .navigation .monthYearSelection select {
74 | border: 0px;
75 | outline: 0px;
76 | }
77 | .monthContainer .navigation .monthYearSelection select:hover {
78 | cursor: pointer;
79 | background-color: var(--backgroundColor);
80 | }
81 | .monthContainer .navigation .monthYearSelection option {
82 | background-color: #fff;
83 | }
84 | .monthContainer.isHebrew .navigation .arrowLeft span {
85 | transform: rotate(-45deg);
86 | -webkit-transform: rotate(-45deg);
87 | }
88 | .monthContainer.isHebrew .navigation .arrowRight span {
89 | transform: rotate(135deg);
90 | -webkit-transform: rotate(135deg);
91 | }
92 | .monthContainer .month {
93 | color: var(--color);
94 | grid-template-columns: repeat(7, 1fr);
95 | grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
96 | z-index: 2;
97 | background-color: white;
98 | display: grid;
99 | width: 100%;
100 | height: 100%;
101 | border-radius: 5px;
102 | padding: 2px;
103 | text-align: center;
104 | box-sizing: border-box;
105 | }
106 | .monthContainer .weekdayWrapper {
107 | display: grid;
108 | grid-template-columns: repeat(7, 1fr);
109 | background-color: #001476;
110 | padding: 2px;
111 | width: 100%;
112 | box-sizing: border-box;
113 | }
114 | .monthContainer .weekday,
115 | .monthContainer .day {
116 | display: grid;
117 | margin: 1px;
118 | padding: 1px 1px 0 0;
119 | align-items: center;
120 | justify-content: center;
121 | user-select: none;
122 | border-radius: 7px;
123 | cursor: pointer;
124 | font-size: 14px;
125 | }
126 | .monthContainer .day:hover {
127 | background-color: var(--backgroundColor);
128 | }
129 | .monthContainer .day.selectedDay:hover{
130 | background-color: rgba(100, 148, 237, 0.539);
131 | }
132 | .monthContainer .weekday {
133 | color: #fff;
134 | font-weight: bold;
135 | }
136 | .monthContainer .otherMonth {
137 | background: #fff;
138 | color: #777;
139 | }
140 | .monthContainer .selectedDay {
141 | background: cornflowerblue;
142 | color: #fff;
143 | }
144 | .monthContainer .startDay {
145 | background: cornflowerblue;
146 | border-radius: 7px 0 0 7px;
147 | color: #fff;
148 | margin: 1px 0;
149 | }
150 | .monthContainer .isInRange {
151 | background-color: #91b6fa;
152 | color: #fff;
153 | border-radius: 0;
154 | margin: 1px 0;
155 | }
156 | .monthContainer .endDay {
157 | background: cornflowerblue;
158 | border-radius: 0 7px 7px 0;
159 | color: #fff;
160 | margin: 1px 0;
161 | }
162 | .monthContainer .startDay:hover,
163 | .monthContainer .isInRange:hover,
164 | .reactJewishDatePicker .endDay:hover {
165 | background: cornflowerblue;
166 | }
167 | .reactJewishDatePicker .noSelect {
168 | cursor: not-allowed !important;
169 | background-color: #f3f3f3;
170 | }
171 | .reactJewishDatePicker .noSelect:hover {
172 | background-color: #f3f3f3;
173 | }
174 | .reactJewishDatePicker .noSelect:active {
175 | pointer-events: none;
176 | }
177 |
--------------------------------------------------------------------------------
/packages/example/src/reactJewishDatePickerExample/ReactJewishDatePickerExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import {
3 | ReactJewishDatePicker,
4 | Month,
5 | BasicJewishDay,
6 | BasicJewishDate,
7 | BasicJewishDateRange,
8 | DateRange,
9 | } from "react-jewish-datepicker";
10 | // import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
11 | import { HiOutlineClipboard } from "@react-icons/all-files/hi/HiOutlineClipboard";
12 | import { HiOutlineClipboardCheck } from "@react-icons/all-files/hi/HiOutlineClipboardCheck";
13 | import { Code } from "./code";
14 |
15 | import "./ReactJewishDatePickerExample.css";
16 | import "../../../reactJewishDatePicker/dist/index.css";
17 |
18 | export interface ReactJewishDatePickerExampleProps {
19 | isHebrew?: boolean;
20 | value?: BasicJewishDate | Date | BasicJewishDateRange | DateRange;
21 | canSelect?: (day: BasicJewishDay) => boolean;
22 | customizeDayStyle?: (day: BasicJewishDay) => string;
23 | isRange?: boolean;
24 | code: string;
25 | isInline?: boolean;
26 | children?: JSX.Element | JSX.Element[];
27 | }
28 |
29 | export const ReactJewishDatePickerExample: React.FC<
30 | ReactJewishDatePickerExampleProps
31 | > = (props: ReactJewishDatePickerExampleProps) => {
32 | const [basicJewishDay, setBasicJewishDay] = React.useState<
33 | BasicJewishDay | undefined
34 | >(undefined);
35 | const [startDay, setStartDay] = React.useState
61 | {/*
62 | */}
66 |
133 | );
134 | };
135 |
--------------------------------------------------------------------------------
/.github/workflows/ci.js.yml:
--------------------------------------------------------------------------------
1 | name: CI_CD
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | build-and-test:
7 |
8 | runs-on: ubuntu-latest
9 |
10 | steps:
11 | - name: Checkout
12 | uses: actions/checkout@v4
13 |
14 | - name: Use Node.js
15 | uses: actions/setup-node@v4
16 | with:
17 | node-version: 20
18 | cache: 'yarn'
19 |
20 | - name: Install
21 | run: yarn
22 |
23 | - name: Build
24 | run: yarn build
25 |
26 | - name: Test
27 | run: yarn test
28 |
29 | # - name: Code Coverage Report
30 | # uses: irongut/CodeCoverageSummary@v1.3.0
31 | # with:
32 | # filename: coverage/**/cobertura-coverage.xml
33 | # badge: true
34 | # fail_below_min: true
35 | # format: markdown
36 | # hide_branch_rate: false
37 | # hide_complexity: true
38 | # indicators: true
39 | # output: both
40 | # thresholds: '60 80'
41 |
42 | # - name: Add Coverage PR Comment
43 | # uses: marocchino/sticky-pull-request-comment@v2
44 | # if: github.event_name == 'pull_request'
45 | # with:
46 | # recreate: true
47 | # path: code-coverage-results.md
48 |
49 | - name: Upload build artifact
50 | uses: actions/upload-artifact@v4
51 | with:
52 | name: lib_core
53 | path: packages/jewishDatesCore/lib
54 |
55 | - name: Upload build artifact
56 | uses: actions/upload-artifact@v4
57 | with:
58 | name: dist_core
59 | path: packages/jewishDatesCore/dist
60 |
61 | - name: Upload build artifact
62 | uses: actions/upload-artifact@v4
63 | with:
64 | name: lib_picker
65 | path: packages/reactJewishDatePicker/lib
66 |
67 | - name: Upload build artifact
68 | uses: actions/upload-artifact@v4
69 | with:
70 | name: dist_picker
71 | path: packages/reactJewishDatePicker/dist
72 |
73 | release:
74 | runs-on: ubuntu-latest
75 | permissions:
76 | issues: write
77 | contents: write
78 | pull-requests: write
79 | deployments: write
80 | id-token: write
81 | needs: [build-and-test]
82 | if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
83 | steps:
84 | - name: Checkout
85 | uses: actions/checkout@v4
86 |
87 | - name: Use Node.js
88 | uses: actions/setup-node@v4
89 | with:
90 | node-version: 20
91 | cache: 'yarn'
92 |
93 | - name: Install
94 | run: yarn
95 |
96 | - name: Download build artifact
97 | uses: actions/download-artifact@v4
98 | with:
99 | name: lib_core
100 | path: packages/jewishDatesCore/lib
101 |
102 | - name: Download build artifact
103 | uses: actions/download-artifact@v4
104 | with:
105 | name: dist_core
106 | path: packages/jewishDatesCore/dist
107 |
108 | - name: Download build artifact
109 | uses: actions/download-artifact@v4
110 | with:
111 | name: lib_picker
112 | path: packages/reactJewishDatePicker/lib
113 |
114 | - name: Download build artifact
115 | uses: actions/download-artifact@v4
116 | with:
117 | name: dist_picker
118 | path: packages/reactJewishDatePicker/dist
119 |
120 |
121 | - run: yarn inc-version
122 | - name: Set env $VERSION_TAG
123 | run: echo "VERSION_TAG=$(yarn get-version)" >> $GITHUB_ENV
124 |
125 | - run: git tag v$VERSION_TAG
126 | - name: Commit version
127 | run: |
128 | git config --global user.name 'Shmulik-Kravitz'
129 | git config --global user.email '29735690+Shmulik-Kravitz@users.noreply.github.com'
130 | git commit -am v$VERSION_TAG
131 | git push
132 | git push origin v$VERSION_TAG
133 | # - run: yarn npm publish --access public
134 | # - run: yarn pub
135 | # env:
136 | # YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
137 | # NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
138 | # NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
139 |
140 | # we use yarn to pack due to yarn workspaces issue with workspace:* in published package in npm
141 | - name: pack jewish-dates-core
142 | working-directory: packages/jewishDatesCore/
143 | run: yarn pack
144 |
145 | - name: pack jewish-dates-core
146 | working-directory: packages/reactJewishDatePicker/
147 | run: yarn pack
148 |
149 | - name: npm-publish jewish-dates-core
150 | uses: JS-DevTools/npm-publish@v3
151 | with:
152 | token: ${{ secrets.NPM_TOKEN }}
153 | package: packages/jewishDatesCore/package.tgz
154 | provenance: true
155 |
156 | - name: npm-publish react-jewish-datepicker
157 | uses: JS-DevTools/npm-publish@v3
158 | with:
159 | token: ${{ secrets.NPM_TOKEN }}
160 | package: packages/reactJewishDatePicker/package.tgz
161 | provenance: true
162 |
163 |
--------------------------------------------------------------------------------
/packages/reactJewishDatePicker/src/month.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState, useRef, useEffect } from "react";
2 | import type { FC } from "react";
3 | import useOnClickOutside from "use-onclickoutside";
4 | import Dayjs from "dayjs";
5 | import {
6 | getJewishMonth,
7 | getWeekdays,
8 | getGregDate,
9 | getJewishDay,
10 | BasicJewishDay,
11 | BasicJewishDate,
12 | JewishMonth,
13 | } from "jewish-dates-core";
14 | import { BasicJewishDateRange, DateRange } from "./interfaces";
15 | import { Day } from "./day";
16 | import { Weekday } from "./weekday";
17 | import { Navigation } from "./navigation";
18 | import {
19 | getDateInit,
20 | getDatesInOrder,
21 | isDateRange,
22 | } from "./utils/dateUtils";
23 |
24 | import "./month.css";
25 |
26 | export interface MonthProps {
27 | onClick: (startDay: BasicJewishDay, endDay: BasicJewishDay) => void;
28 | value?: BasicJewishDate | Date | BasicJewishDateRange | DateRange;
29 | isHebrew?: boolean;
30 | canSelect?: (day: BasicJewishDay) => boolean;
31 | customizeDayStyle?: (day: BasicJewishDay) => string;
32 | isRange?: boolean;
33 | isOpen?: boolean;
34 | setOpen?: (isOpen: boolean) => void;
35 | setSelectedDay?: (day: BasicJewishDay) => void;
36 | setStartDay?: (day: BasicJewishDay) => void;
37 | setEndDay?: (day: BasicJewishDay) => void;
38 | }
39 |
40 | export const Month: FC
67 |
74 |
132 |
76 |
131 |
77 | {!props.isInline ? {
86 | setBasicJewishDay(day);
87 | }
88 | : (startDay: BasicJewishDay, endDay: BasicJewishDay) => {
89 | setStartDay(startDay);
90 | setEndDay(endDay);
91 | }
92 | }
93 | > :
94 |
116 |
95 | {
102 | setBasicJewishDay(day);
103 | }
104 | : (startDay: BasicJewishDay, endDay: BasicJewishDay) => {
105 | setStartDay(startDay);
106 | setEndDay(endDay);
107 | }
108 | }
109 | canSelect={props.canSelect}
110 | customizeDayStyle={props.customizeDayStyle}
111 | >
112 |
113 | }
114 | {props.children}
115 |
117 | {basicJewishDay ?
130 | Day value:
: null} 118 | {startDay ?Range value:
: null} 119 | {startDay ? ( 120 |121 |126 | ) : ( 127 |start day:
122 | {JSON.stringify(startDay, null, 2)} 123 |end day:
124 | {JSON.stringify(endDay, null, 2)} 125 |
{JSON.stringify(basicJewishDay, null, 2)}
128 | )}
129 |
139 |
170 | );
171 | };
--------------------------------------------------------------------------------
/packages/reactJewishDatePicker/src/__tests__/reactJewishDatePicker.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { waitFor, screen } from "@testing-library/react";
3 | import { render, fireEvent } from "./test-utils";
4 | import {
5 | BasicJewishDate,
6 | BasicJewishDay,
7 | BasicJewishDateRange,
8 | ReactJewishDatePicker,
9 | } from "..";
10 | import {
11 | getEngJewishMonths,
12 | dontSelectHolidays,
13 | dontSelectShabat,
14 | } from "jewish-dates-core";
15 | import { it, expect, describe } from "vitest";
16 |
17 | describe("jewishDatesCore", () => {
18 | it("change month", async () => {
19 | const basicJewishDate: BasicJewishDate = {
20 | day: 13,
21 | monthName: "Elul",
22 | year: 5781,
23 | };
24 |
25 | const { container, getByText } = render(
26 |
146 | {getWeekdays(isHebrew).map((weekday) => {
147 | return
150 |
151 | {jewishMonthInfo.days.map((day, index) => {
152 | return (
153 |
169 |
14 | {
17 | setBasicJewishDay(day);
18 | }}
19 | />
20 |
21 | );
22 | }`);
23 |
24 | export const hebrewCode = (`import * as React from "react";
25 | import {
26 | ReactJewishDatePicker,
27 | BasicJewishDay,
28 | BasicJewishDate
29 | } from "react-jewish-datepicker";
30 | import "react-jewish-datepicker/dist/index.css";
31 | import {
32 | JewishMonth,
33 | } from "jewish-dates-core";
34 |
35 | export default function App() {
36 | const [basicJewishDay, setBasicJewishDay] = React.useState
45 | {
49 | setBasicJewishDay(day);
50 | }}
51 | />
52 |
53 | );
54 | }`);
55 |
56 | export const dontSelectHolidayCode = (`import * as React from "react";
57 | import {
58 | ReactJewishDatePicker,
59 | BasicJewishDay,
60 | } from "react-jewish-datepicker";
61 | import "react-jewish-datepicker/dist/index.css";
62 | import { dontSelectHolidays } from "jewish-dates-core";
63 |
64 | export default function App() {
65 | const [basicJewishDay, setBasicJewishDay] = React.useState
73 | {
78 | setBasicJewishDay(day);
79 | }}
80 | />
81 |
82 | );
83 | }`);
84 |
85 | export const dontSelectShabatCode = (`import * as React from "react";
86 | import {
87 | ReactJewishDatePicker,
88 | BasicJewishDay,
89 | } from "react-jewish-datepicker";
90 | import "react-jewish-datepicker/dist/index.css";
91 | import { dontSelectShabat } from "jewish-dates-core";
92 |
93 | export default function App() {
94 | const [basicJewishDay, setBasicJewishDay] = React.useState
99 | {
104 | setBasicJewishDay(day);
105 | }}
106 | />
107 |
108 | );
109 | }`);
110 |
111 | export const dontSelectShabatAndHolidaysCode = (`import * as React from "react";
112 | import {
113 | ReactJewishDatePicker,
114 | BasicJewishDay,
115 | } from "react-jewish-datepicker";
116 | import "react-jewish-datepicker/dist/index.css";
117 | import { dontSelectShabatAndHolidays } from "jewish-dates-core";
118 |
119 | export default function App() {
120 | const [basicJewishDay, setBasicJewishDay] = React.useState
126 | {
131 | setBasicJewishDay(day);
132 | }}
133 | />
134 |
135 | );
136 | }`);
137 |
138 | export const selectionWithinRangeCode = (`import * as React from "react";
139 | import {
140 | ReactJewishDatePicker,
141 | BasicJewishDay,
142 | } from "react-jewish-datepicker";
143 | import "react-jewish-datepicker/dist/index.css";
144 | import {
145 | dontSelectOutOfRange,
146 | addDates,
147 | subtractDates
148 | } from "jewish-dates-core";
149 |
150 | export default function App() {
151 | const [basicJewishDay, setBasicJewishDay] = React.useState
158 | {
163 | setBasicJewishDay(day);
164 | }}
165 | />
166 |
167 | );
168 | }`);
169 |
170 | export const disableWithCustomFunctionCode = (`import * as React from "react";
171 | import {
172 | ReactJewishDatePicker,
173 | BasicJewishDay,
174 | } from "react-jewish-datepicker";
175 | import "react-jewish-datepicker/dist/index.css";
176 |
177 | const dontSelectTuesdays = (day: BasicJewishDay): boolean => {
178 | if (day.date.getDay() === 2) {
179 | return false;
180 | }
181 | return true;
182 | }
183 |
184 | export default function App() {
185 | const [basicJewishDay, setBasicJewishDay] = React.useState
190 | {
195 | setBasicJewishDay(day);
196 | }}
197 | />
198 |
199 | );
200 | }`);
201 |
202 |
203 | export const customizeDayStyleCode = (`import * as React from "react";
204 | import {
205 | ReactJewishDatePicker,
206 | BasicJewishDay,
207 | } from "react-jewish-datepicker";
208 | import "react-jewish-datepicker/dist/index.css";
209 |
210 | const highlightTuesday = (day: BasicJewishDay): string => {
211 | if (day.date.getDay() === 2) {
212 | return 'tuesday';
213 | }
214 | return '';
215 | };
216 |
217 | export default function App() {
218 | const [basicJewishDay, setBasicJewishDay] = React.useState
223 | {
228 | setBasicJewishDay(day);
229 | }}
230 | />
231 |
232 | );
233 | }`);
234 |
235 |
236 | export const rangeCode = (`import * as React from "react";
237 | import {
238 | ReactJewishDatePicker,
239 | BasicJewishDateRange,
240 | } from "react-jewish-datepicker";
241 | import "react-jewish-datepicker/dist/index.css";
242 | import {
243 | JewishMonth,
244 | } from "jewish-dates-core";
245 |
246 | export default function App() {
247 | const [startDay, setStartDay] = React.useState
264 | {
269 | setStartDay(startDay);
270 | setEndDay(endDay);
271 | }}
272 | />
273 |
274 | );
275 | }`);
276 |
277 | export const inlineVersionCode = (`import * as React from "react";
278 | import {
279 | Month,
280 | BasicJewishDay,
281 | } from "react-jewish-datepicker";
282 | import "react-jewish-datepicker/dist/index.css";
283 |
284 | export default function App() {
285 | const [basicJewishDay, setBasicJewishDay] = React.useState
290 | {
294 | setBasicJewishDay(day);
295 | }}
296 | />
297 |
298 | );
299 | }`);
300 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-jewish-datepicker
2 |
3 | [](https://www.npmjs.com/package/react-jewish-datepicker)
4 | [](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/)
5 | 
6 | [](https://bundlephobia.com/package/react-jewish-datepicker)
7 | 
8 | [](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/)
9 |
10 |
11 | 
12 |
13 | # React Jewish Date Picker
14 |
15 | General Jewish Date Picker component that works with react and supports hebrew and english.
16 |
17 | See also [demo and documentation](https://react-jewish-datepicker.js.org/) page.
18 |
19 | ## Installation
20 |
21 | ```console
22 | yarn add react-jewish-datepicker
23 | ```
24 |
25 | Or with npm
26 |
27 | ```console
28 | npm install react-jewish-datepicker --save
29 | ```
30 |
31 | Import the css
32 |
33 | ```JavaScript
34 | import "react-jewish-datepicker/dist/index.css";
35 | ```
36 |
37 | or with css
38 |
39 | ```JavaScript
40 | @import url("react-jewish-datepicker/dist/index.css");
41 | ```
42 |
43 | ## Usage
44 |
45 | #### TypeScript example:
46 |
47 | ```js
48 | import * as React from "react";
49 | import {
50 | ReactJewishDatePicker,
51 | BasicJewishDay,
52 | BasicJewishDate
53 | } from "react-jewish-datepicker";
54 | import "react-jewish-datepicker/dist/index.css";
55 | import {
56 | JewishMonth,
57 | } from "jewish-dates-core";
58 |
59 | export default function App() {
60 | const [basicJewishDay, setBasicJewishDay] = React.useState
70 | Hebrew:
71 | {
75 | setBasicJewishDay(day);
76 | }}
77 | />
78 |
79 |
80 | );
81 | }
82 |
83 |
84 | ```
85 |
86 | [](https://codesandbox.io/s/react-jewish-datepicker-typescript-example-1myb0?fontsize=14&hidenavigation=1&theme=dark)
87 |
88 | #### JavaScript example:
89 |
90 | ```js
91 | import * as React from "react";
92 | import { ReactJewishDatePicker, BasicJewishDay } from "react-jewish-datepicker";
93 | import "react-jewish-datepicker/dist/index.css";
94 |
95 | export default function App() {
96 | const [basicJewishDay, setBasicJewishDay] = React.useState();
97 | return (
98 |
70 | Hebrew:
71 | {
75 | setBasicJewishDay(day);
76 | }}
77 | />
78 |
79 |
80 | );
81 | }
82 |
83 |
84 | ```
85 |
86 | [](https://codesandbox.io/s/react-jewish-datepicker-typescript-example-1myb0?fontsize=14&hidenavigation=1&theme=dark)
87 |
88 | #### JavaScript example:
89 |
90 | ```js
91 | import * as React from "react";
92 | import { ReactJewishDatePicker, BasicJewishDay } from "react-jewish-datepicker";
93 | import "react-jewish-datepicker/dist/index.css";
94 |
95 | export default function App() {
96 | const [basicJewishDay, setBasicJewishDay] = React.useState();
97 | return (
98 |
120 |
121 | BH
122 |
124 |
152 |
378 | );
379 | }
380 |
--------------------------------------------------------------------------------
/packages/jewishDatesCore/README.md:
--------------------------------------------------------------------------------
1 | # jewish-dates-core
2 |
3 | This package is core functionality of react-jewish-datepicker
4 |
5 | If you want to create a jewish date picker in vue.js or angular, this is the core dependency.
6 |
7 | ## Installation
8 |
9 | ```console
10 | yarn add jewish-dates-core
11 | ```
12 |
13 | Or with npm
14 |
15 | ```console
16 | npm i jewish-dates-core --save
17 | ```
18 |
19 | ## Functions
20 |
21 | React Jewish Datepicker
123 |
131 | 
138 | 
144 |
153 |
377 |
154 |
211 | Installation
155 |Install the package via Yarn:
156 |
157 | yarn add react-jewish-datepicker
158 |
170 |
171 | Or via npm:
172 |
173 | npm install react-jewish-datepicker --save
174 |
189 |
190 | Import the css
191 |Copy the import to your project:
192 |
193 | import "react-jewish-datepicker/dist/index.css";
194 |
209 |
210 | Examples
212 |
213 |
376 |
214 |
227 | -
215 | {ExampleLinkList.map((example) => (
216 |
- 217 | handleAnchorClick(e, example.id)} 220 | > 221 | {example.title} 222 | 223 | 224 | ))} 225 |
228 |
375 |
229 |
234 |
242 |
243 |
255 |
256 |
257 | English View
230 |
258 |
265 | Hebrew View
259 |
266 |
274 | Holidays Selection Disabled
267 |
275 |
283 | Shabat Selection Disabled
276 |
284 |
292 | Shabat and Holidays Selection Disabled
285 |
293 |
301 | Selection Within Range
294 |
302 |
310 | Disable Days With Custom Function
303 |
311 |
319 | Customize Day Style
312 |
320 |
327 |
343 |
344 |
363 |
364 |
365 | Range Datepicker
321 |
366 |
374 | Inline Version
367 |-
22 |
- isValidDate 23 |
Returns whether a date is a Date object
24 |
25 | - getHebWeekdays 26 |
Returns an array of week days in hebrew
27 |
28 | - getEngWeekdays 29 |
Returns an array of week days in english
30 |
31 | - getWeekdays 32 |
Returns an array of week days
33 |
34 | - getHebJewishMonths 35 |
Returns an array of jewish months in hebrew
36 |
37 | - getEngJewishMonths 38 |
Returns an array of jewish months in english
39 |
40 | - getJewishMonths 41 |
Returns an array of jewish months according to year and language
42 |
43 | - getJewishYears 44 |
Takes a number of a jewish year and returns array of 200 years around it
45 |
46 | - getPrevMonth 47 |
Takes a BasicJewishMonthInfo object and returns the equivalent of prev month
48 |
49 | - getNextMonth 50 |
Takes a BasicJewishMonthInfo object and returns the equivalent of next month
51 |
52 | - getGregDate 53 |
Converts BasicJewishDate object to gregorian date
54 |
55 | - getJewishMonthInfo 56 |
Takes a gregorian date and returns BasicJewishMonthInfo object
57 |
58 | - formatJewishDate 59 |
Takes a BasicJewishDate object and returns a string of the date in english
60 |
61 | - formatJewishDateHebrew 62 |
Takes a BasicJewishDate object and returns a string of the date in hebrew
63 |
64 | - getJewishDate 65 |
Takes a gregorian date and returns a BasicJewishDate object
66 |
67 | - IsJewishDatesEqual 68 |
Compares jewish dates returning true if the dates match and false if not
69 |
70 | - getJewishDay 71 |
Takes a dayjs date and returns a JewishDay object
72 |
73 | - getJewishMonth 74 |
Takes a gregorian date and returns a JewishMonth object
75 |
76 | - getHolidays 77 |
Returns an array of jewish holiday dates corresponding with the isIsrael param
78 |
79 | - dontSelectHolidays 80 |
Returns a function which can be passed to the `canSelect` prop, in order to prevent holidays selection
81 |
82 | - dontSelectShabat 83 |
A function to be passed to the "canSelect" prop, in order to prevent shabat selection
84 |
85 | - dontSelectShabatAndHolidays 86 |
Returns a function to be passed to the "canSelect" prop. combines "dontSelectHolidays" and "dontSelectShabat" in order to prevent both - shabat and holidays selection
87 |
88 | - dontSelectOutOfRange 89 |
Takes min date and max date and returns a function to be passed to the "canSelect" prop, in order to prevent selection out of the supplied range
90 |
91 | - addDates 92 |
Adds days to a given date
93 |
94 | - subtractDates 95 |
Subtracts days to a given date
96 |
97 |
-
98 |
99 |
100 |
101 | ### isValidDate(date: `Date` | `BasicJewishDate`) ⇒ `boolean`
102 |
103 | Returns whether a date is a Date object.
104 |
105 | | Param | Type |
106 | | ----- | --------------------------- |
107 | | date | `Date` \| `BasicJewishDate` |
108 |
109 | **example:**
110 | ```js
111 | const basicJewishDate: BasicJewishDate = {
112 | day: 13,
113 | monthName: "Elul",
114 | year: 5788,
115 | };
116 |
117 | isValidDate(basicJewishDate); // ==> false
118 | isValidDate(new Date()); // ==> true
119 | ```
120 |
121 |
122 |
123 | ### getHebWeekdays() ⇒ `string[]`
124 |
125 | Returns an array of week days in hebrew.
126 |
127 | **example:**
128 | ```js
129 | getHebWeekdays(); // ==> ["א", "ב", "ג", "ד", "ה", "ו", "ש"]
130 | ```
131 |
132 |
133 |
134 | ### getEngWeekdays() ⇒ `string[]`
135 |
136 | Returns an array of week days in english.
137 |
138 | **example:**
139 | ```js
140 | getEngWeekdays(); // ==> ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
141 | ```
142 |
143 |
144 |
145 | ### getWeekdays(isHebrew: `boolean`) ⇒ `string[]`
146 |
147 | Returns an array of week days corresponding with the isHebrew param.
148 |
149 | | Param | Type |
150 | | -------- | --------- |
151 | | isHebrew | `boolean` |
152 |
153 | **example:**
154 | ```js
155 | getWeekdays(true); // ==> ["א", "ב", "ג", "ד", "ה", "ו", "ש"]
156 | getWeekdays(false); // ==> ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
157 | ```
158 |
159 |
160 |
161 |
162 | ### getHebJewishMonthById(monthId: `string`) ⇒ `string`
163 |
164 | Takes a jewish month name in english and returns the name in hebrew.
165 |
166 | | Param | Type |
167 | | ------- | -------- |
168 | | monthId | `string` |
169 |
170 | **example:**
171 | ```js
172 | getHebJewishMonthById("Tishri"); // ==> 'תשרי'
173 | ```
174 |
175 |
176 |
177 | ### getHebJewishMonths() ⇒ `IdText[]`
178 |
179 | Returns an array of jewish months in hebrew.
180 |
181 | **example:**
182 | ```js
183 | getHebJewishMonths(); // ==> [{id: "Tishri", text: "תשרי"}, {id: "Cheshvan", text: "חשון"} ...]
184 | ```
185 |
186 |
187 |
188 | ### getEngJewishMonths() ⇒ `IdText[]`
189 |
190 | Returns an array of jewish months in english.
191 |
192 | **example:**
193 | ```js
194 | getEngJewishMonths(); // ==> [{id: "Tishri", text: "Tishri"}, {id: "Cheshvan", text: "Cheshvan"} ...]
195 | ```
196 |
197 |
198 |
199 | ### getJewishMonths(year: `number`, [isHebrew?: `boolean`]) ⇒ `IdText[]`
200 |
201 | Returns an array of jewish months according to year (regular/leap) and language.
202 |
203 | | Param | Type | Default |
204 | | -------- | --------- | ------- |
205 | | year | `number` | n/a |
206 | | isHebrew | `boolean` | `false` |
207 |
208 | **example:**
209 | ```js
210 | getJewishMonths(5781, true); // ==> [... {id: "AdarI", text: "אדר"}, {id: "Nisan", text: "ניסן"} ...] regular year months in henrew
211 | getJewishMonths(5782); // ==> [... {id: "AdarI", text: "AdarI"}, {id: "AdarII", text: "AdarII"} ...] leap year months in english
212 | ```
213 |
214 |
215 |
216 | ### getJewishYears(year: `number`) ⇒ `number[]`
217 |
218 | Takes a number of a jewish year and returns array of 200 years around it.
219 |
220 | | Param | Type |
221 | | ----- | -------- |
222 | | year | `number` |
223 |
224 | **example:**
225 | ```js
226 | getJewishYears(5781); // ==> [5681, 5682, ... 5781, ... 5880, 5881]
227 | getJewishYears(5781).length; // ==> 201
228 | ```
229 |
230 |
231 |
232 | ### getPrevMonth(basicJewishMonthInfo: `BasicJewishMonthInfo`) ⇒ `BasicJewishMonthInfo`
233 |
234 | Takes a BasicJewishMonthInfo object and returns the equivalent of prev month.
235 |
236 | | Param | Type |
237 | | -------------------- | ---------------------- |
238 | | basicJewishMonthInfo | `BasicJewishMonthInfo` |
239 |
240 | **example:**
241 | ```js
242 | const tishriInfo: BasicJewishMonthInfo = {
243 | isHebrew: false,
244 | month: "Tishri",
245 | year: 5782,
246 | };
247 |
248 | getPrevMonth(tishriInfo); // ==> {isHebrew: false, month: 'Elul', year: 5781}
249 | ```
250 |
251 |
252 |
253 | ### getNextMonth(basicJewishMonthInfo: `BasicJewishMonthInfo`) ⇒ `BasicJewishMonthInfo`
254 |
255 | Takes a BasicJewishMonthInfo object and returns the equivalent of next month.
256 |
257 | | Param | Type |
258 | | -------------------- | ---------------------- |
259 | | basicJewishMonthInfo | `BasicJewishMonthInfo` |
260 |
261 | **example:**
262 | ```js
263 | const elulInfo: BasicJewishMonthInfo = {
264 | isHebrew: true,
265 | month: "Elul",
266 | year: 5781,
267 | };
268 |
269 | getNextMonth(elulInfo); // ==> {isHebrew: true, month: 'Tishri', year: 5782}
270 | ```
271 |
272 |
273 |
274 | ### getGregDate(props: BasicJewishDate) ⇒ `Date`
275 |
276 | Converts BasicJewishDate object to gregorian date.
277 |
278 | | Param | Type |
279 | | ----- | ----------------- |
280 | | props | `BasicJewishDate` |
281 |
282 | **example:**
283 | ```js
284 | const basicJewishDate: BasicJewishDate = {
285 | day: 13,
286 | monthName: "Elul",
287 | year: 5781,
288 | };
289 |
290 | getGregDate(basicJewishDate); // ==> Sat Aug 21 2021 00:00:00 GMT+0300 (שעון ישראל (קיץ))
291 | ```
292 |
293 |
294 |
295 | ### getJewishMonthInfo(date: Date) ⇒ `JewishMonthInfo`
296 |
297 | Takes a gregorian date and returns BasicJewishMonthInfo object.
298 |
299 | | Param | Type |
300 | | ----- | ------ |
301 | | date | `Date` |
302 |
303 | **example:**
304 | ```js
305 | getJewishMonthInfo(new Date(2022, 0, 27)); /* ==> { jewishDate: {year: 5782, month: 5, day: 25, monthName: 'Shevat'},
306 | jewishMonth: 5,
307 | startOfJewishMonth: Dayjs(new Date(2022, 0, 3)),
308 | sundayStartOfTheMonth: Dayjs(new Date(2022, 0, 2))} */
309 | ```
310 |
311 |
312 |
313 | ### formatJewishDate(jewishDate: `JewishDate`) ⇒ `string`
314 |
315 | Takes a BasicJewishDate object and returns a string of the date in english.
316 |
317 | | Param | Type |
318 | | ---------- | ------------ |
319 | | jewishDate | `JewishDate` |
320 |
321 | **example:**
322 | ```js
323 | const jewishDate: JewishDate = {
324 | day: 13,
325 | monthName: "Elul",
326 | year: 5781,
327 | month: 13,
328 | };
329 |
330 | formatJewishDate(jewishDate); // ==> "13 Elul 5781"
331 | ```
332 |
333 |
334 |
335 | ### formatJewishDateHebrew(jewishDate: `JewishDate`) ⇒ `string`
336 |
337 | Takes a BasicJewishDate object and returns a string of the date in hebrew.
338 |
339 | | Param | Type |
340 | | ---------- | ------------ |
341 | | jewishDate | `JewishDate` |
342 |
343 | **example:**
344 | ```js
345 | const jewishDate: JewishDate = {
346 | day: 13,
347 | monthName: "Elul",
348 | year: 5781,
349 | month: 13,
350 | };
351 |
352 | formatJewishDateHebrew(jewishDate); // ==> "י״ג אלול התשפ״א"
353 | ```
354 |
355 |
356 |
357 | ### getJewishDate(date: `Date`) ⇒ `JewishDate`
358 |
359 | Takes a gregorian date and returns a BasicJewishDate object.
360 |
361 | | Param | Type |
362 | | ----- | ------ |
363 | | date | `Date` |
364 |
365 | **example:**
366 | ```js
367 | getJewishDate(new Date(2021, 7, 21)); // ==> {day: 13, monthName: "Elul", year: 5781, month: 13}
368 | ```
369 |
370 |
371 |
372 | ### IsJewishDatesEqual(jewishDate1: `JewishDate`, jewishDate2: `JewishDate`) ⇒ `boolean`
373 |
374 | Compares jewish dates returning true if the dates match and false if not.
375 |
376 | | Param | Type |
377 | | ----------- | ------------ |
378 | | jewishDate1 | `JewishDate` |
379 | | jewishDate2 | `JewishDate` |
380 |
381 | **example:**
382 | ```js
383 | const jewishDate1: JewishDate = {
384 | day: 13,
385 | monthName: "Elul",
386 | year: 5781,
387 | month: 13,
388 | };
389 | const jewishDate2: JewishDate = {
390 | day: 14,
391 | monthName: "Shevat",
392 | year: 5781,
393 | month: 5,
394 | };
395 |
396 | IsJewishDatesEqual(jewishDate1, jewishDate2); // ==> false
397 | IsJewishDatesEqual(jewishDate2, jewishDate2); // ==> true
398 | ```
399 |
400 |
401 |
402 | ### getJewishDay(dayjsDate: `Dayjs`) ⇒ `JewishDay`
403 |
404 | Takes a gregorian date and returns a JewishMonth object.
405 |
406 | | Param | Type |
407 | | --------- | ------- |
408 | | dayjsDate | `Dayjs` |
409 |
410 | **example:**
411 | ```js
412 | const date = Dayjs(new Date(2022, 0, 27));
413 |
414 | getJewishDay(date); /* ==> { date: 2022-01-26T22:00:00.000Z,
415 | day: 25,
416 | dayjsDate: d {'$L': 'en', '$d': 2022-01-26T22:00:00.000Z, '$y': 2022, '$M': 0, '$D': 27, '$W': 4, '$H': 0, '$m': 0, '$s': 0, '$ms': 0},
417 | isCurrentMonth: false,
418 | jewishDate: { year: 5782, month: 5, day: 25, monthName: 'Shevat' },
419 | jewishDateStr: '25 Shevat 5782',
420 | jewishDateStrHebrew: 'כ״ה שבט התשפ״ב'} */
421 | ```
422 |
423 |
424 |
425 | ### getJewishMonth(date: `Date`) ⇒ `JewishMonth`
426 |
427 | Takes a gregorian date and returns a JewishMonth object.
428 |
429 | | Param | Type |
430 | | ----- | ------ |
431 | | date | `Date` |
432 |
433 | **example:**
434 | ```js
435 | getJewishMonth(new Date(2022, 0, 27)); /* ==> selectedDay: { day: 25, jewishDateStr: '25 Shevat 5782', ...},
436 | jewishMonth: 5,
437 | jewishYear: 5782,
438 | jewishMonthString: 'Shevat',
439 | days: [{day: 29, jewishDateStr: '29 Tevet 5782', ...}, { day: 1, jewishDateStr: '1 Shevat 5782', ...}, ...] */
440 | ```
441 |
442 |
443 |
444 | ### getHolidays(isIsrael: `boolean`) ⇒ `string[]`
445 |
446 | Returns an array of jewish holiday dates corresponding with the isIsrael param.
447 |
448 | | Param | Type |
449 | | ----- | ------ |
450 | | isIsrael | `boolean` |
451 |
452 | **example:**
453 | ```js
454 | getHolidays(true); // ==> ['1 Tishri', '2 Tishri', '10 Tishri', '15 Tishri', '22 Tishri', '15 Nisan', '21 Nisan', '6 Sivan']
455 | getHolidays(false); // ==> ['1 Tishri', '2 Tishri', '10 Tishri', '15 Tishri', '22 Tishri', '15 Nisan', '21 Nisan', '6 Sivan', '16 Tishri', '23 Tishri', '16 Nisan', '22 Nisan', '7 Sivan']
456 | ```
457 |
458 |
459 |
460 | ### dontSelectHolidays([isIsrael: `boolean`]) ⇒ `(day: BasicJewishDay) => boolean`
461 |
462 | Returns a function which can be passed to the `canSelect` prop, in order to prevent holidays (corresponding with `isIsrael` param) selection. The returned function takes a `BasicJewishDay` object, and returns `false` if it's an holiday and `true` otherwise.
463 |
464 | | Param | Type | Default |
465 | | ----- | ------ | ----- |
466 | | isIsrael | `boolean` | `false` |
467 |
468 | **example:**
469 | full example [here](https://react-jewish-datepicker.js.org/#disableHolidays)
470 |
471 |
472 |
473 | ### dontSelectShabat(day: `BasicJewishDay`) ⇒ `boolean`
474 |
475 | A function to be passed to the `canSelect` prop, in order to prevent shabat selection. Takes a `BasicJewishDay` object, and returns `false` if it's an shabat and `true` otherwise.
476 |
477 | | Param | Type |
478 | | ----- | ------ |
479 | | day | `BasicJewishDay` |
480 |
481 | **example:**
482 | full example [here](https://react-jewish-datepicker.js.org/#disableShabat)
483 |
484 |
485 |
486 | ### dontSelectShabatAndHolidays([isIsrael: `boolean`]) ⇒ `(day: BasicJewishDay) => boolean`
487 |
488 | Returns a function to be passed to the "canSelect" prop. combines `dontSelectHolidays` and `dontSelectShabat` in order to prevent both - shabat and holidays selection. The returned function takes a `BasicJewishDay` object, and returns `false` if it's an shabat or holiday and `true` otherwise.
489 |
490 | | Param | Type | Default |
491 | | ----- | ------ | ----- |
492 | | isIsrael | `boolean` | `false` |
493 |
494 | **example:**
495 | full example [here](https://react-jewish-datepicker.js.org/#disableShabatAndHolidays)
496 |
497 |
498 |
499 | ### dontSelectOutOfRange(minDate: `Date` | `null`, maxDate: `Date` | `null`) ⇒ `(day: BasicJewishDay) => boolean`
500 |
501 | Takes min date and max date and returns a function to be passed to the "canSelect" prop, in order to prevent selection out of the supplied range. The returned function takes a `BasicJewishDay` object, and returns `true` if it's within range (min date and max date included) and `false` otherwise.
502 |
503 | You can pass a date only for one of the params and null to the other. In this case, the selectable range will be up to max date or from min date.
504 |
505 | | Param | Type |
506 | | ----- | ------ |
507 | | minDate | `Date` \| `null` |
508 | | maxDate | `Date` \| `null` |
509 |
510 | **example:**
511 | full example [here](https://react-jewish-datepicker.js.org/#selectionWithinRange)
512 |
513 |
514 |
515 | ### addDates(date: `BasicJewishDate` | `Date`, numDays: `number`) ⇒ `Date`
516 |
517 | Takes a `BasicJewishDate` object or a `Date`, adds a date interval (`numDays`) to the date and then returns the new date.
518 |
519 | | Param | Type |
520 | | ----- | ------ |
521 | | date | `BasicJewishDate` \| `Date` |
522 | | numDays | `number` |
523 |
524 | **example:**
525 | ```js
526 | const date = new Date(2022, 3, 17);
527 |
528 | addDates(date, 3)) // => Wed Apr 20 2022 00:00:00 GMT+0300 (שעון ישראל (קיץ))
529 | ```
530 |
531 |
532 |
533 | ### subtractDates(date: `BasicJewishDate` | `Date`, numDays: `number`) ⇒ `Date`
534 |
535 | Takes a `BasicJewishDate` object or a `Date`, subtracts a date interval (`numDays`) from the date and then returns the new date.
536 |
537 | | Param | Type |
538 | | ----- | ------ |
539 | | date | `BasicJewishDate` \| `Date` |
540 | | numDays | `number` |
541 |
542 | **example:**
543 | ```js
544 | const basicJewishDate: BasicJewishDate = {
545 | day: 13,
546 | monthName: "Elul",
547 | year: 5781,
548 | };
549 |
550 | subtractDates(basicJewishDate, 4)) // => Tue Aug 17 2021 00:00:00 GMT+0300 (שעון ישראל (קיץ))
551 | ```
552 |
553 | - [Shmulik Kravitz](https://github.com/Shmulik-Kravitz)
554 | - [Sagi Tawil](https://github.com/sagi770)
555 | - [Yochanan Sheinberger](https://github.com/yochanan-sheinberger)
556 |
557 | License: [MIT](https://github.com/Shmulik-Kravitz/react-jewish-datepicker/blob/master/LICENSE).
558 |
--------------------------------------------------------------------------------