From 78e0742fa9eb648caef5dd5ac40bebe62b04b591 Mon Sep 17 00:00:00 2001 From: aboveyunhai <35160613+aboveyunhai@users.noreply.github.com> Date: Mon, 17 Apr 2023 00:14:07 -0400 Subject: [PATCH 1/4] custom disabled dates --- example/index.tsx | 15 ++++++++++++--- src/components/calendarPanel.tsx | 3 +++ src/components/dayOfMonth.tsx | 22 ++++++++-------------- src/single.tsx | 6 ++++++ 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/example/index.tsx b/example/index.tsx index 13bd368..1a346f4 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -24,6 +24,7 @@ import { Weekday_Names_Short, } from '../src'; import GitHubButton from 'react-github-btn'; +import { subDays, addDays, startOfDay } from 'date-fns'; type FirstDayOfWeek = DatepickerConfigs['firstDayOfWeek']; const offsets: FirstDayOfWeek[] = [0, 1, 2, 3, 4, 5, 6]; @@ -40,7 +41,8 @@ const Section: React.FC> = ({ const App = () => { const { colorMode, toggleColorMode } = useColorMode(); - const [date, setDate] = useState(new Date('07/28/2022')); + const demoDate = new Date(); + const [date, setDate] = useState(demoDate); const [selectedDates, setSelectedDates] = useState([ new Date(), new Date(), @@ -83,8 +85,15 @@ const App = () => { diff --git a/src/components/calendarPanel.tsx b/src/components/calendarPanel.tsx index 1ee8370..b3d2053 100644 --- a/src/components/calendarPanel.tsx +++ b/src/components/calendarPanel.tsx @@ -17,6 +17,7 @@ import { DayOfMonth } from './dayOfMonth'; interface CalendarPanelProps extends DatepickerProps { dayzedHookProps: Omit; configs: CalendarConfigs; + disabledDates?: Set; onMouseEnterHighlight?: (date: Date) => void; isInRange?: (date: Date) => boolean | null; } @@ -25,6 +26,7 @@ export const CalendarPanel: React.FC = ({ dayzedHookProps, configs, propsConfigs, + disabledDates, onMouseEnterHighlight, isInRange, }) => { @@ -125,6 +127,7 @@ export const CalendarPanel: React.FC = ({ propsConfigs={propsConfigs} renderProps={renderProps} isInRange={isInRange && isInRange(date)} + disabledDates={disabledDates} onMouseEnter={() => { if (onMouseEnterHighlight) onMouseEnterHighlight(date); }} diff --git a/src/components/dayOfMonth.tsx b/src/components/dayOfMonth.tsx index ceb863f..2e892fd 100644 --- a/src/components/dayOfMonth.tsx +++ b/src/components/dayOfMonth.tsx @@ -6,6 +6,7 @@ import { DatepickerProps, DayOfMonthBtnStyleProps } from '../utils/commonTypes'; interface DayOfMonthProps extends DatepickerProps { renderProps: RenderProps; isInRange?: boolean | null; + disabledDates?: Set; dateObj: DateObj; onMouseEnter?: React.MouseEventHandler | undefined; } @@ -20,6 +21,7 @@ export const DayOfMonth: React.FC = ({ dateObj, propsConfigs, isInRange, + disabledDates, renderProps, onMouseEnter, }) => { @@ -31,14 +33,12 @@ export const DayOfMonth: React.FC = ({ selectedBtnProps, todayBtnProps, } = propsConfigs?.dayOfMonthBtnProps || {}; - + const disabled = !selectable || disabledDates?.has(date.getTime()); const styleBtnProps: DayOfMonthBtnStyleProps = useMemo( () => ({ defaultBtnProps: { size: 'sm', variant: 'ghost', - // background: 'transparent', - // borderColor: 'transparent', // this intends to fill the visual gap from Grid to improve the UX // so the button active area is actually larger than what it's seen ...defaultBtnProps, @@ -76,26 +76,20 @@ export const DayOfMonth: React.FC = ({ ...todayBtnProps, }, }), - [ - defaultBtnProps, - isInRangeBtnProps, - selectedBtnProps, - todayBtnProps, - selectable, - ] + [defaultBtnProps, isInRangeBtnProps, selectedBtnProps, todayBtnProps] ); return ( - - - -
- -
-
- First Day of Week: {Weekday_Names_Short[firstDayOfWeek || 0]} - - {offsets.map((e) => ( - - ))} - - - -
+

+ If you used light/dark theme, just be aware of your style under specific + mode. +

+ + + + + Single & Range + + + Custom Styles + + + Custom Month/Weekday/Format + + + With Offset + + + Calendar + + + + + +
+ + closeOnSelect: + setSingleCheck(e.currentTarget.checked)} + /> + + +
+
+ + closeOnSelect: + setRangeCheck(e.currentTarget.checked)} + /> + + +
+ + + + +
+ Custom Styles: + + +
+ + + + +
+ Check the month name and day labels + +
+ + + + +
+ + First Day of Week: {Weekday_Names_Short[firstDayOfWeek || 0]} + + + {offsets.map((e) => ( + + ))} + + + +
+ + + + +
+ +
+
+ +
+ + + + ); }; +const SingleCalendarDemo = () => { + const demoDate = new Date(); + const [date, setDate] = useState(demoDate); + + const handleOnDateSelected = (props: { + date: Date; + nextMonth: boolean; + prevMonth: boolean; + selectable: boolean; + selected: boolean; + today: boolean; + }) => { + const { date } = props; + if (date instanceof Date && !isNaN(date.getTime())) { + setDate(date); + } + }; + + return ( + + {format(date, 'yyyy-MM-dd')} + + + ); +}; + +const RangeCalendarDemo = () => { + const demoDate = new Date(); + const [selectedDates, setSelectedDates] = useState([ + demoDate, + demoDate, + ]); + + const handleOnDateSelected: OnDateSelected = ({ selectable, date }) => { + let newDates = [...selectedDates]; + if (selectedDates.length) { + if (selectedDates.length === 1) { + let firstTime = selectedDates[0]; + if (firstTime < date) { + newDates.push(date); + } else { + newDates.unshift(date); + } + setSelectedDates(newDates); + return; + } + + if (newDates.length === 2) { + setSelectedDates([date]); + return; + } + } else { + newDates.push(date); + setSelectedDates(newDates); + } + }; + + // eventually we want to allow user to freely type their own input and parse the input + let intVal = selectedDates[0] + ? `${format(selectedDates[0], 'yyyy-MM-dd')}` + : ''; + intVal += selectedDates[1] + ? ` - ${format(selectedDates[1], 'yyyy-MM-dd')}` + : ''; + + return ( + + {intVal} + + + ); +}; + +const Section: React.FC> = ({ + title, + children, +}) => ( + + {title} + {children} + +); + +const Panel: React.FC> = ({ children }) => ( + + + + + {children} + +); + const config: ThemeConfig = { initialColorMode: 'light', useSystemColorMode: false, diff --git a/src/components/calendarPanel.tsx b/src/components/calendarPanel.tsx index b3d2053..8c930c4 100644 --- a/src/components/calendarPanel.tsx +++ b/src/components/calendarPanel.tsx @@ -14,7 +14,7 @@ import { CalendarConfigs, DatepickerProps } from '../utils/commonTypes'; import { DatepickerBackBtns, DatepickerForwardBtns } from './dateNavBtns'; import { DayOfMonth } from './dayOfMonth'; -interface CalendarPanelProps extends DatepickerProps { +export interface CalendarPanelProps extends DatepickerProps { dayzedHookProps: Omit; configs: CalendarConfigs; disabledDates?: Set; diff --git a/src/index.tsx b/src/index.tsx index a15f69d..335dc6d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,6 @@ -export type { DatepickerConfigs } from './utils/commonTypes'; +export type { DatepickerConfigs, OnDateSelected } from './utils/commonTypes'; +export type { CalendarPanelProps } from './components/calendarPanel'; export * from './utils/calanderUtils'; +export { CalendarPanel } from './components/calendarPanel'; export * from './single'; export * from './range'; diff --git a/src/range.tsx b/src/range.tsx index 161f189..ab1bd37 100644 --- a/src/range.tsx +++ b/src/range.tsx @@ -29,7 +29,7 @@ interface RangeCalendarPanelProps { selected?: Date | Date[]; } -const RangeCalendarPanel: React.FC = ({ +export const RangeCalendarPanel: React.FC = ({ dayzedHookProps, configs, propsConfigs, From 9576e4b975b8796ab53503ac6d3acb9fa163aa81 Mon Sep 17 00:00:00 2001 From: aboveyunhai <35160613+aboveyunhai@users.noreply.github.com> Date: Mon, 24 Apr 2023 00:22:26 -0400 Subject: [PATCH 3/4] Update .gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 07cac22..78c105c 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ node_modules .cache dist -.parcel-cache \ No newline at end of file +.parcel-cache +.vscode \ No newline at end of file From fa0347aa17dcf2036fb2f66298d31bdcb82e17e3 Mon Sep 17 00:00:00 2001 From: aboveyunhai <35160613+aboveyunhai@users.noreply.github.com> Date: Mon, 24 Apr 2023 00:34:05 -0400 Subject: [PATCH 4/4] Update README.md --- README.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 7e3f266..5aa3dba 100644 --- a/README.md +++ b/README.md @@ -124,14 +124,15 @@ Non Chakra-related configurations : ### other props: -Name | Type | Default value | Description -----------------------|------------------------|-------------------------|-------------- -name | string | undefined | name attribute for `` element -usePortal | boolean | undefined | to prevent parent styles from clipping or hiding content -defaultIsOpen | boolean | false | open the date panel at the beginning -closeOnSelect | boolean | true | close the date panel upon the complete selection -minDate | Date | undefined | minimum date -maxDate | Date | undefined | maximum date +Name |single/range | Type | Default value | Description +----------------------|--------------|------------------------|-------------------------|-------------- +name |both | string | undefined | name attribute for `` element +usePortal |both | boolean | undefined | to prevent parent styles from clipping or hiding content +defaultIsOpen |both | boolean | false | open the date panel at the beginning +closeOnSelect |both | boolean | true | close the date panel upon the complete selection +minDate |both | Date | undefined | minimum date +maxDate |both | Date | undefined | maximum date +disabledDates |single | Set | undefined | for single datepicker only, uses `startOfDay` as comparison, e.g., ` disabledDates={new Set([startOfDay(new Date()).getTime()}` For version < `npm@0.1.6`:
`dayOfMonthBtnProps` extends from `ButtonProps` and has only `selectedBg` support,