diff --git a/package-lock.json b/package-lock.json index f63e0f1..5b21886 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@matharumanpreet00/react-daterange-picker", - "version": "1.0.0", + "version": "1.0.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/DefinedRanges.tsx b/src/components/DefinedRanges.tsx index 70147cb..37da781 100644 --- a/src/components/DefinedRanges.tsx +++ b/src/components/DefinedRanges.tsx @@ -4,6 +4,7 @@ import { DefinedRange, DateRange } from "../types"; import { isSameDay } from "date-fns"; type DefinedRangesProps = { + resetRange: () => void; setRange: (range: DateRange) => void; selectedRange: DateRange; ranges: DefinedRange[]; @@ -36,6 +37,14 @@ const DefinedRanges: React.FunctionComponent = props => { ))} + props.resetRange()}> + + Reset Range + + ); }; diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index d59133e..a2c1ea5 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -41,6 +41,7 @@ interface MenuProps extends WithStyles { setFirstMonth: Setter; setSecondMonth: Setter; setDateRange: Setter; + resetDateRage: () => void; helpers: { inHoverRange: (day: Date) => boolean; }; @@ -63,6 +64,7 @@ const Menu: React.FunctionComponent = props => { secondMonth, setSecondMonth, setDateRange, + resetDateRage, helpers, handlers } = props; @@ -113,6 +115,7 @@ const Menu: React.FunctionComponent = props => { selectedRange={dateRange} ranges={ranges} setRange={setDateRange} + resetRange={resetDateRage} /> diff --git a/src/defaults.ts b/src/defaults.ts index 8aeb533..0bde3bd 100644 --- a/src/defaults.ts +++ b/src/defaults.ts @@ -45,7 +45,7 @@ const getDefaultRanges = (date: Date): DefinedRange[] => [ label: "Last Month", startDate: startOfMonth(addMonths(date, -1)), endDate: endOfMonth(addMonths(date, -1)) - } + }, ]; export const defaultRanges = getDefaultRanges(new Date()); diff --git a/src/index.tsx b/src/index.tsx index 5ba46da..d9eac3a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -98,6 +98,11 @@ const DateRangePickerImpl: React.FunctionComponent = props } }; + const resetDateRange = () => { + setDateRange({ ...initialDateRange }); + onChange({ ...initialDateRange }); + } + const onDayClick = (day: Date) => { if (startDate && !endDate && !isBefore(day, startDate)) { const newRange = { startDate, endDate: day }; @@ -157,6 +162,7 @@ const DateRangePickerImpl: React.FunctionComponent = props setFirstMonth={setFirstMonthValidated} setSecondMonth={setSecondMonthValidated} setDateRange={setDateRangeValidated} + resetDateRage={resetDateRange} helpers={helpers} handlers={handlers} /> diff --git a/src/types.ts b/src/types.ts index 7b80c11..803978a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,7 +11,7 @@ export enum NavigationAction { } export type DefinedRange = { - startDate: Date; - endDate: Date; + startDate?: Date; + endDate?: Date; label: string; };