Skip to content

Commit 8a65b95

Browse files
shahabyazdishahabyazdi
authored
Merge pull request #182 from shahabyazdi/develop
v4.0.0
2 parents 5f6a026 + bf6b1ed commit 8a65b95

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1744
-416
lines changed

‎README.md

Lines changed: 78 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# DatePicker
22

33
Simple React datepicker component for working with `gregorian`, `persian`, `arabic` and `indian` calendars
4-
with the ability to select the date in `single`, `multiple` and `range` modes.
4+
with the ability to select the date in `single`, `multiple`, `range` and `multiple range` modes.
55

66
<div align="center">
77
<img src="https://github.com/shahabyazdi/react-multi-date-picker/blob/master/screenshot/screenshot.jpg?raw=true" alt="date picker"/>
@@ -26,7 +26,7 @@ Ability to further customize the calendar and datepicker by adding one or more p
2626
## Installation
2727

2828
```code
29-
npm install --save react-multi-date-picker
29+
npm i react-multi-date-picker
3030
```
3131

3232
## Demo
@@ -205,18 +205,6 @@ export default function Example() {
205205
<td style="text-align:center"></td>
206206
<td>both</td>
207207
</tr>
208-
<tr>
209-
<td>onOpen</td>
210-
<td style="text-align:center">Function</td>
211-
<td style="text-align:center"></td>
212-
<td>DatePicker</td>
213-
</tr>
214-
<tr>
215-
<td>onClose</td>
216-
<td style="text-align:center">Function</td>
217-
<td style="text-align:center"></td>
218-
<td>DatePicker</td>
219-
</tr>
220208
<tr>
221209
<td>onPropsChange</td>
222210
<td style="text-align:center">Function</td>
@@ -241,12 +229,6 @@ export default function Example() {
241229
<td style="text-align:center"></td>
242230
<td>both</td>
243231
</tr>
244-
<tr>
245-
<td>onPositionChange</td>
246-
<td style="text-align:center">Function</td>
247-
<td style="text-align:center"></td>
248-
<td>DatePicker</td>
249-
</tr>
250232
<tr>
251233
<td>digits</td>
252234
<td style="text-align:center">Array</td>
@@ -415,28 +397,76 @@ export default function Example() {
415397
<td style="text-align:center">false</td>
416398
<td>both</td>
417399
</tr>
418-
<tr>
400+
<tr>
419401
<td>rangeHover</td>
420402
<td style="text-align:center">Boolean</td>
421403
<td style="text-align:center">false</td>
422404
<td>both</td>
423405
</tr>
424406
<tr>
425-
<td>containerClassName</td>
407+
<td>monthYearSeparator</td>
426408
<td style="text-align:center">String</td>
409+
<td style="text-align:center">"," for LTR locales, "،" for RTL locales</td>
410+
<td>both</td>
411+
</tr>
412+
<tr>
413+
<td>formatMonth</td>
414+
<td style="text-align:center">Function</td>
415+
<td style="text-align:center">undefined</td>
416+
<td>both</td>
417+
</tr>
418+
<tr>
419+
<td>formatYear</td>
420+
<td style="text-align:center">Function</td>
421+
<td style="text-align:center">undefined</td>
422+
<td>both</td>
423+
</tr>
424+
<tr>
425+
<td>highlightToday</td>
426+
<td style="text-align:center">Boolean</td>
427+
<td style="text-align:center">true</td>
428+
<td>both</td>
429+
</tr>
430+
<tr>
431+
<td>style</td>
432+
<td style="text-align:center">React.CSSProperties</td>
433+
<td style="text-align:center">{}</td>
434+
<td>both</td>
435+
</tr>
436+
<tr>
437+
<td>headerOrder</td>
438+
<td style="text-align:center">Array</td>
439+
<td style="text-align:center">["LEFT_BUTTON", "MONTH_YEAR", "RIGHT_BUTTON"]</td>
440+
<td>both</td>
441+
</tr>
442+
<tr>
443+
<td>onOpen</td>
444+
<td style="text-align:center">Function</td>
427445
<td style="text-align:center"></td>
428446
<td>DatePicker</td>
429447
</tr>
430448
<tr>
431-
<td>arrowClassName</td>
449+
<td>onClose</td>
450+
<td style="text-align:center">Function</td>
451+
<td style="text-align:center"></td>
452+
<td>DatePicker</td>
453+
</tr>
454+
<tr>
455+
<td>onPositionChange</td>
456+
<td style="text-align:center">Function</td>
457+
<td style="text-align:center"></td>
458+
<td>DatePicker</td>
459+
</tr>
460+
<tr>
461+
<td>containerClassName</td>
432462
<td style="text-align:center">String</td>
433-
<td style="text-align:center">0</td>
463+
<td style="text-align:center"></td>
434464
<td>DatePicker</td>
435465
</tr>
436466
<tr>
437-
<td>style</td>
438-
<td style="text-align:center">React.CSSProperties</td>
439-
<td style="text-align:center">{}</td>
467+
<td>arrowClassName</td>
468+
<td style="text-align:center">String</td>
469+
<td style="text-align:center">0</td>
440470
<td>DatePicker</td>
441471
</tr>
442472
<tr>
@@ -595,6 +625,18 @@ export default function Example() {
595625
<td style="text-align:center">[]</td>
596626
<td>DatePicker</td>
597627
</tr>
628+
<tr>
629+
<td>dateSeparator</td>
630+
<td style="text-align:center"> string</td>
631+
<td style="text-align:center">'~' in range mode, ',' in multiple mode</td>
632+
<td>DatePicker</td>
633+
</tr>
634+
<tr>
635+
<td>multipleRangeSeparator</td>
636+
<td style="text-align:center"> string</td>
637+
<td style="text-align:center">','</td>
638+
<td>DatePicker</td>
639+
</tr>
598640
</tbody>
599641
</table>
600642

@@ -620,14 +662,22 @@ Click [here](https://shahabyazdi.github.io/react-multi-date-picker/calendars) to
620662
<td>/calendars/indian</td>
621663
</tr>
622664
<tr>
623-
<th rowspan="4">Locales</th>
665+
<th rowspan="5">Locales</th>
624666
<th>English</th>
625667
<td>/locales/gregorian_en</td>
626668
<td>/locales/persian_en</td>
627669
<td>/locales/persian_en</td>
628670
<td>/locales/arabic_en</td>
629671
<td>/locales/indian_en</td>
630672
</tr>
673+
<tr>
674+
<th>Portuguese - BRAZIL</th>
675+
<td>/locales/gregorian_pt_br</td>
676+
<td>-</td>
677+
<td>-</td>
678+
<td>-</td>
679+
<td>-</td>
680+
</tr>
631681
<tr>
632682
<th>Farsi</th>
633683
<td>/locales/gregorian_fa</td>

‎changelog.md

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
1-
# 3.3.1
1+
# 4.0.0
22

3-
- Removed placeholder from input icon value. [#130](https://github.com/shahabyazdi/react-multi-date-picker/issues/130)
4-
- mobileButtons added to props
5-
- Dependencies updated. (React 18.2.0 and ...)
3+
- multiple range picker.
4+
- custom mobile labels bug fixed in default locale.
5+
- monthYearSeparator added. [#98-1](https://github.com/shahabyazdi/react-multi-date-picker/issues/98#issue-1127212098)
6+
- formatMonth & formatYear added [#98-2](https://github.com/shahabyazdi/react-multi-date-picker/issues/98#issuecomment-1110705026)
7+
- in datepicker onChange method has (date, {validatedValue, input, isTyping}) arguments for validations.
8+
- highlightToday added. [#145](https://github.com/shahabyazdi/react-multi-date-picker/issues/145)
9+
- dateSeparator added.
10+
- input is now editable in multiple & range mode. [#147](https://github.com/shahabyazdi/react-multi-date-picker/issues/147)
11+
- multipleRangeSeparator added.
12+
- allow users to change the order of the header items by headerOrder prop.
13+
- CustomComponentProps type exported for typescript. [#175](https://github.com/shahabyazdi/react-multi-date-picker/issues/175)
14+
- Bug in timepicker if number keeps being pressed fixed. [#155](https://github.com/shahabyazdi/react-multi-date-picker/issues/155)
15+
- The Calendar component accepts the HTMLDivElement props along with its own props.
616

7-
# 3.3.2
17+
# 3.3.4
818

9-
- rangeHover added. [#133](https://github.com/shahabyazdi/react-multi-date-picker/issues/133)
19+
- missed rangeHover prop added to index.d.ts.
1020

1121
# 3.3.3
1222

13-
- range hover effect added in onlyYearPicker and onlyMonthPicker
23+
- range hover effect added in onlyYearPicker and onlyMonthPicker.
1424

15-
# 3.3.4
25+
# 3.3.2
26+
27+
- rangeHover added. [#133](https://github.com/shahabyazdi/react-multi-date-picker/issues/133)
1628

17-
- missed rangeHover prop added to index.d.ts
29+
# 3.3.1
30+
31+
- Removed placeholder from input icon value. [#130](https://github.com/shahabyazdi/react-multi-date-picker/issues/130)
32+
- mobileButtons added to props.
33+
- Dependencies updated. (React 18.2.0 and ...)

‎index.d.ts

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,24 @@ declare module "react-multi-date-picker" {
1616
export type FunctionalPlugin = { type: string; fn: Function };
1717
export type Plugin = React.ReactElement | FunctionalPlugin;
1818

19-
export interface CalendarProps {
19+
export type HeaderItem =
20+
| "MONTH_YEAR"
21+
| "YEAR_MONTH"
22+
| "LEFT_BUTTON"
23+
| "RIGHT_BUTTON";
24+
25+
export type CustomComponentProps = {
26+
value?: string;
27+
openCalendar?: () => void;
28+
onFocus?: () => void;
29+
handleValueChange?: (e: React.ChangeEvent) => void;
30+
onChange?: (e: React.ChangeEvent) => void;
31+
locale?: Locale;
32+
separator?: string;
33+
};
34+
35+
export interface CalendarProps
36+
extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
2037
ref?: React.MutableRefObject<any>;
2138
/**
2239
* @types Date | string | number | DateObject
@@ -167,7 +184,7 @@ declare module "react-multi-date-picker" {
167184
* }}
168185
* />
169186
*/
170-
onChange?(selectedDates: DateObject | DateObject[] | null): void;
187+
onChange?(selectedDates: DateObject | DateObject[] | null): void | false;
171188
showOtherDays?: boolean;
172189
/**
173190
* the date you set in datepicker as value must be equal or bigger than min date.
@@ -308,6 +325,11 @@ declare module "react-multi-date-picker" {
308325
weekNumber?: string;
309326
weekPicker?: boolean;
310327
rangeHover?: boolean;
328+
monthYearSeparator?: string;
329+
formatMonth?: (month: string, year: string) => string;
330+
formatYear?: (year: string, month: string) => string;
331+
highlightToday?: boolean;
332+
headerOrder?: Array<HeaderItem>;
311333
}
312334

313335
export interface DatePickerProps {
@@ -353,11 +375,18 @@ declare module "react-multi-date-picker" {
353375
/**
354376
* @example
355377
* <DatePicker
356-
* type="custom"
357378
* render={<CustomComponent/>}
358379
* />
359380
*/
360-
render?: React.ReactElement | Function;
381+
render?:
382+
| React.ReactElement<CustomComponentProps>
383+
| ((
384+
value: string,
385+
openCalendar: () => void,
386+
handleValueChange: (e: React.ChangeEvent) => void,
387+
locale: Locale,
388+
separator: string
389+
) => React.ReactNode);
361390
/**
362391
* This feature only affects on `input` in `single` mode
363392
*
@@ -467,6 +496,15 @@ declare module "react-multi-date-picker" {
467496
mobileButtons?: Array<
468497
HTMLAttributes<HTMLButtonElement> & { label: string }
469498
>;
499+
onChange?(
500+
selectedDates: DateObject | DateObject[] | null,
501+
validatedValue: string | Array<string>,
502+
input: HTMLElement,
503+
isTyping: boolean
504+
): void | false;
505+
dateSeparator?: boolean;
506+
multipleRangeSeparator?: boolean;
507+
type?: string;
470508
}
471509

472510
export { DateObject };

‎package-lock.json

Lines changed: 12 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "react-multi-date-picker",
3-
"version": "3.3.4",
4-
"description": "a simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple and range pickers.",
3+
"version": "4.0.0",
4+
"description": "A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.",
55
"main": "./build/index.js",
66
"types": "index.d.ts",
77
"scripts": {
8+
"website": "cd website && npm start",
89
"build": "rollup -c",
910
"test": "jest ./test"
1011
},
@@ -19,13 +20,16 @@
1920
"picker",
2021
"datepicker",
2122
"rangepicker",
23+
"weekpicker",
2224
"timepicker",
2325
"date picker",
2426
"range picker",
2527
"time picker",
28+
"week picker",
2629
"multiple",
2730
"range",
2831
"time",
32+
"week",
2933
"gregorian",
3034
"calendar",
3135
"persian",

‎rollup.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function getProps() {
6464
babel({
6565
exclude: /node_modules/,
6666
presets,
67+
babelHelpers: "bundled",
6768
}),
6869
commonjs(),
6970
postcss({

‎screenshot/screenshot.jpg

40.7 KB
Loading

0 commit comments

Comments
 (0)