Skip to content

Commit

Permalink
docs: update docs for custom components
Browse files Browse the repository at this point in the history
  • Loading branch information
Samsam Ahmadi committed Mar 21, 2021
1 parent 660a652 commit 06c295d
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 22 deletions.
44 changes: 23 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,34 +40,36 @@ Your project needs to use React 16 or later. If you use older version of React,

#### Props

| Prop name | Description | Default value | Example values |
| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------------ |
| onChange | this function return an array of days | n/a | `(days:string[]) => console.log('selected days',days)` |
| selectedDays | the initial array of days | `[]` | `['2019-10-01','2019-11-06']` |
| jalali | choice jalali or gregorian calendar | `false` | `false`/`true` |
| numberOfMonths | number of months you need to show | `1` | `7` |
| numberOfSelectableDays | number of days you need | 0/Infiniti | `3` |
| disabledDays | the disabled days that you don't want clickable to choice | `[]` | `['2019-11-04',2019-12-14]` |
| autoResponsive | makes your calendar responsive but you can handle it by your self by change the `numberOfMonths` | `true` | `false/true` |
| disabledBeforeToday | disabled days before today | `false` | `true`/`false` |
| disabled | disabled calendar | `false` | `true`/`false` |
| Prop name | Description | Default value | Example values |
| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange | this function return an array of days | n/a | `(days:string[]) => console.log('selected days',days)` |
| selectedDays | the initial array of days | `[]` | `['2019-10-01','2019-11-06']` |
| jalali | choice jalali or gregorian calendar | `false` | `false`/`true` |
| numberOfMonths | number of months you need to show | `1` | `7` |
| numberOfSelectableDays | number of days you need | 0/Infiniti | `3` |
| disabledDays | the disabled days that you don't want clickable to choice | `[]` | `['2019-11-04',2019-12-14]` |
| autoResponsive | makes your calendar responsive but you can handle it by your self by change the `numberOfMonths` | `true` | `false/true` |
| disabledBeforeToday | disabled days before today | `false` | `true`/`false` |
| disabled | disabled calendar | `false` | `true`/`false` |
| components | update header title, week title and day component | `undefined` | `{days?: ElementType<{day:string;jalali: boolean;}>;header?: {format?: string;};titleOfWeek?:{titles?: string[];wrapper?: ElementType<{ jalali: boolean }>;};}` |

##

### RangePicker

#### Props

| Prop name | Description | Default value | Example values |
| ------------------- | ------------------------------------------------------------------------------------------------ | ----------------- | ------------------------------------------------------ |
| onChange | this function return an array of days | n/a | `(days:string[]) => console.log('selected days',days)` |
| selectedDays | the initial range date | `{from:'',to:''}` | `{from:'2019-12-12',to:'2019-12-18'}` |
| jalali | choice jalali or gregorian calendar | `false` | `false`/`true` |
| numberOfMonths | number of months you need to show | `1` | `7` |
| disabledDays | the disabled days that you don't want clickable to choice | `[]` | `['2019-11-04',2019-12-14]` |
| autoResponsive | makes your calendar responsive but you can handle it by your self by change the `numberOfMonths` | `true` | `false/true` |
| disabledBeforeToday | disabled days before today | `false` | `true`/`false` |
| disabled | disabled calendar | `false` | `true`/`false` |
| Prop name | Description | Default value | Example values |
| ------------------- | ------------------------------------------------------------------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange | this function return an array of days | n/a | `(days:string[]) => console.log('selected days',days)` |
| selectedDays | the initial range date | `{from:'',to:''}` | `{from:'2019-12-12',to:'2019-12-18'}` |
| jalali | choice jalali or gregorian calendar | `false` | `false`/`true` |
| numberOfMonths | number of months you need to show | `1` | `7` |
| disabledDays | the disabled days that you don't want clickable to choice | `[]` | `['2019-11-04',2019-12-14]` |
| autoResponsive | makes your calendar responsive but you can handle it by your self by change the `numberOfMonths` | `true` | `false/true` |
| disabledBeforeToday | disabled days before today | `false` | `true`/`false` |
| disabled | disabled calendar | `false` | `true`/`false` |
| components | update header title, week title and day component | `undefined` | `{days?: ElementType<{day:string;jalali: boolean;}>;header?: {format?: string;};titleOfWeek?:{titles?: string[];wrapper?: ElementType<{ jalali: boolean }>;};}` |

#### special thanks to:

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-trip-date",
"version": "1.3.0",
"version": "1.4.0",
"description": "date-picker and range-picker for React applications",
"author": "Samsam Ahmadi",
"license": "GPL-3.0",
Expand Down
52 changes: 52 additions & 0 deletions src/stories/DatePicker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,55 @@ stories.add("Number of Selectable Days", () => {
/>
);
});

stories.add("Custom components - Header component", () => {
return (
<DatePicker
components={{
titleOfWeek: {
wrapper: ({ jalali }) => (
<div>this is a custom title of weeks component</div>
),
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Header titles", () => {
return (
<DatePicker
components={{
titleOfWeek: {
titles: ["1", "2", "3", "4", "5", "6", "7"],
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Header Calendar format", () => {
return (
<DatePicker
components={{
header: {
format: "YY**MMMM",
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Day", () => {
return (
<DatePicker
components={{
days: ({ day, jalali }) => <div style={{ color: "red" }}>{day}</div>,
}}
onChange={dates => console.log("dates", dates)}
/>
);
});
52 changes: 52 additions & 0 deletions src/stories/RangePicker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,55 @@ stories.add("Disabled Days", () => {
/>
);
});

stories.add("Custom components - Header component", () => {
return (
<RangePicker
components={{
titleOfWeek: {
wrapper: ({ jalali }) => (
<div>this is a custom title of weeks component</div>
),
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Header titles", () => {
return (
<RangePicker
components={{
titleOfWeek: {
titles: ["1", "2", "3", "4", "5", "6", "7"],
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Header Calendar format", () => {
return (
<RangePicker
components={{
header: {
format: "YY**MMMM",
},
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

stories.add("Custom components - Day", () => {
return (
<RangePicker
components={{
days: ({ day }) => <div style={{ color: "red" }}>{day}</div>,
}}
onChange={dates => console.log("dates", dates)}
/>
);
});

0 comments on commit 06c295d

Please sign in to comment.