Skip to content

Commit

Permalink
Merge branch 'main' into feat/is-date-disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@farhoudshapouran
farhoudshapouran authored Sep 15, 2024
2 parents 3a1a728 + f2e47fb commit e57cf0e
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 56 deletions.
73 changes: 37 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,17 @@ For more, take a look at the `/example` directory.

## Calendar props

| Name | Type | Default | Description |
| --------------- | ------------------- | ------------- | ------------------------------------------------------------------------ |
| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` |
| locale | `string` | `'en'` | Defines the DatePicker locale |
| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date |
| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date |
| isDateDisabled | `(Date) => boolean` | `undefined` | Defines a custom callback to disable custom dates like weekends |
| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday |
| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view |
| initialView | `string` | `'day'` | Defines the DatePicker initial view `['day', 'month', 'year', 'time']` |
| height | `number` | `'undefined'` | Defines the Calendar view heights |
| Name | Type | Default | Description |
| --------------- | -------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` |
| locale | `string` | `'en'` | Defines the DatePicker locale |
| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date |
| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date |
| disabledDates | `DateType[]` or `Function` | `[]` or `(date: DateType) => boolean` | Defines DatePicker array of disabled dates, or a function that returns true for a given date |
| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday |
| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view |
| initialView | `string` | `'day'` | Defines the DatePicker initial view `['day', 'month', 'year', 'time']` |
| height | `number` | `'undefined'` | Defines the Calendar view heights |

<p align="center">
<img src="/.github/images/modes-screenshot.png" />
Expand Down Expand Up @@ -100,31 +100,32 @@ For more, take a look at the `/example` directory.

## Styling props

| Name | Type | Default | Description |
| -------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |
| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |
| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |
| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style |
| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color |
| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size |
| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` |
| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon |
| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon |
| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |
| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |
| todayTextStyle | `TextStyle` | `null` | Defines today text style |
| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |
| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |
| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |
| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |
| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |
| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| Name | Type | Default | Description |
| ---------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |
| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |
| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |
| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style |
| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color |
| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size |
| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` |
| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon |
| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon |
| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |
| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |
| todayTextStyle | `TextStyle` | `null` | Defines today text style |
| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |
| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |
| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |
| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |
| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |
| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| selectedRangeBackgroundColor | `string` | `undefined` | Defines selected range background color. |

## Contributing

Expand Down
2 changes: 2 additions & 0 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,8 @@ export default function App() {
//isDateDisabled={(date) => [0, 6].includes(dayjs(date).day())} // disable weekends
//minDate={dayjs().startOf('day')}
//maxDate={dayjs().add(3, 'day').endOf('day')}
//disabledDates={[dayjs(), dayjs().add(1, 'day')]}
//disabledDates={(date) => [0, 6].includes(dayjs(date).day())}// disable weekends
//firstDayOfWeek={1}
displayFullDays
timePicker={timePicker}
Expand Down
11 changes: 9 additions & 2 deletions src/DateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const DateTimePicker = (
// endYear,
minDate,
maxDate,
disabledDates,
date,
startDate,
endDate,
Expand Down Expand Up @@ -106,6 +107,10 @@ const DateTimePicker = (
currentDate = dayjs(dates[0]);
}

if (minDate && currentDate.isBefore(minDate)) {
currentDate = dayjs(minDate);
}

let currentYear = currentDate.year();

dayjs.locale(locale);
Expand Down Expand Up @@ -163,7 +168,8 @@ const DateTimePicker = (

useEffect(() => {
if (mode === 'single') {
const newDate = date && (timePicker ? date : getStartOfDay(date));
const newDate =
(date && (timePicker ? date : getStartOfDay(date))) ?? minDate;

dispatch({
type: CalendarActionKind.CHANGE_SELECTED_DATE,
Expand All @@ -180,7 +186,7 @@ const DateTimePicker = (
payload: { dates },
});
}
}, [mode, date, startDate, endDate, dates, timePicker]);
}, [mode, date, startDate, endDate, dates, minDate, timePicker]);

const setCalendarView = useCallback((view: CalendarViews) => {
dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
Expand Down Expand Up @@ -294,6 +300,7 @@ const DateTimePicker = (
timePicker,
minDate,
maxDate,
disabledDates,
firstDayOfWeek: firstDay,
height,
theme: rest,
Expand Down
4 changes: 3 additions & 1 deletion src/components/Day.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function Day({
selectedTextStyle,
todayContainerStyle,
todayTextStyle,
selectedRangeBackgroundColor,
} = theme;

//const bothWays = inRange && leftCrop && rightCrop;
Expand Down Expand Up @@ -79,7 +80,8 @@ function Day({
}
: calendarTextStyle;

const rangeRootBackground = addColorAlpha(selectedItemColor, 0.15);
const rangeRootBackground =
selectedRangeBackgroundColor ?? addColorAlpha(selectedItemColor, 0.15);

const style = styles(height || CALENDAR_HEIGHT);

Expand Down
11 changes: 7 additions & 4 deletions src/components/DaySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const DaySelector = () => {
displayFullDays,
minDate,
maxDate,
isDateDisabled,
disabledDates,
firstDayOfWeek,
theme,
height,
Expand All @@ -50,14 +50,15 @@ const DaySelector = () => {
minDate,
maxDate,
firstDayOfWeek,
isDateDisabled
disabledDates,
firstDayOfWeek
).map((day, index) => {
if (day) {
let leftCrop = day.dayOfMonth === 1;
let rightCrop = day.dayOfMonth === fullDaysInMonth;

const isFirstDayOfMonth = day.dayOfMonth === 1;
const isLastDayOfMonth = day.dayOfMonth === fullDaysInMonth;
const isLastDayOfMonth = ((day?.dayOfMonth || 0) - ((day?.dayOfMonth || 0) - day.day)) === fullDaysInMonth;

Check failure on line 61 in src/components/DaySelector.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `·((day?.dayOfMonth·||·0)·-·((day?.dayOfMonth·||·0)·-·day.day))·===` with `⏎············(day?.dayOfMonth·||·0)·-·((day?.dayOfMonth·||·0)·-·day.day)·===⏎···········`

const isToday = areDatesOnSameDay(day.date, today);
let inRange = false;
Expand Down Expand Up @@ -88,7 +89,8 @@ const DaySelector = () => {

if (
(isFirstDayOfMonth && selectedEndDay) ||
(isLastDayOfMonth && selectedStartDay)
(isLastDayOfMonth && selectedStartDay) ||
dayjs(startDate).format('DDMMYYYY') === dayjs(endDate).format('DDMMYYYY')

Check failure on line 93 in src/components/DaySelector.tsx

View workflow job for this annotation

GitHub Actions / lint 

Insert `⏎···············`
) {
inRange = false;
}
Expand Down Expand Up @@ -158,6 +160,7 @@ const DaySelector = () => {
firstDayOfWeek,
minDate,
maxDate,
disabledDates,
date,
startDate,
endDate,
Expand Down
3 changes: 2 additions & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export type CalendarThemeProps = {
timePickerTextStyle?: TextStyle;
timePickerIndicatorStyle?: ViewStyle;
timePickerDecelerationRate?: 'normal' | 'fast' | number;
selectedRangeBackgroundColor?: string;
};

export type HeaderProps = {
Expand Down Expand Up @@ -85,7 +86,7 @@ export interface DatePickerBaseProps {
endYear?: number;
minDate?: DateType;
maxDate?: DateType;
isDateDisabled?: (date: Date) => boolean;
disabledDates?: DateType[] | ((date: DateType) => boolean);
firstDayOfWeek?: number;
displayFullDays?: boolean;
timePicker?: boolean;
Expand Down
Loading

0 comments on commit e57cf0e

Please sign in to comment.