diff --git a/pages/date-range-picker/common.tsx b/pages/date-range-picker/common.tsx index 91dc392584..9aeee38398 100644 --- a/pages/date-range-picker/common.tsx +++ b/pages/date-range-picker/common.tsx @@ -27,6 +27,7 @@ interface DateRangePickerPageSettings { disabledDates?: DisabledDate; showDisabledReason?: boolean; hasValue?: boolean; + secondaryGrid?: DateRangePickerProps.SecondaryGrid; } const defaultSettings: Required = { @@ -45,6 +46,7 @@ const defaultSettings: Required = { disabledDates: 'none', showDisabledReason: true, hasValue: true, + secondaryGrid: 'previous', }; export function useDateRangePickerSettings( @@ -89,6 +91,7 @@ export function useDateRangePickerSettings( const disabledDates = urlParams.disabledDates ?? def('disabledDates'); const showDisabledReason = parseBoolean(def('showDisabledReason'), urlParams.showDisabledReason); const hasValue = parseBoolean(def('hasValue'), urlParams.hasValue); + const secondaryGrid = urlParams.secondaryGrid ?? def('secondaryGrid'); const settings: Required = { dateOnly, monthOnly, @@ -105,6 +108,7 @@ export function useDateRangePickerSettings( disabledDates, showDisabledReason, hasValue, + secondaryGrid, }; const setSettings = (settings: DateRangePickerPageSettings) => setUrlParams(settings); @@ -212,6 +216,7 @@ export function useDateRangePickerSettings( placeholder, i18nStrings, locale: 'en-GB', + secondaryGrid, }; return { props, settings, setSettings }; @@ -256,6 +261,7 @@ export function Settings({ disabledDates, showDisabledReason, hasValue, + secondaryGrid, }, setSettings, }: { @@ -274,6 +280,7 @@ export function Settings({ const dateFormatOptions = [{ value: 'iso' }, { value: 'slashed' }, { value: 'long-localized' }]; const inputDateFormat = [{ value: 'iso' }, { value: 'slashed' }]; const timeFormatOptions = [{ value: 'hh:mm:ss' }, { value: 'hh:mm' }, { value: 'hh' }]; + const secondaryGridOptions = [{ value: 'previous' }, { value: 'next' }]; return ( @@ -332,6 +339,16 @@ export function Settings({ /> + +