Merge pull request #2498 from teamleadercrm/TIDAL-3184-allow-configur…

…ing-initial-month

[Date picker] Allow configuring initial month

CHANGELOG.md

@@ -12,7 +12,11 @@
 
 ### Dependency updates
 
-## [18.2.3] - 2022-12-16
+## [18.3.0] - 2022-12-19
+
+### Added
+
+- `DatePicker`: Allow changing the initialMonth if no date is selected ([@lorgan3](https://github.com/lorgan3)) in ([#2498](https://github.com/teamleadercrm/ui/pull/2498))
 
 ### Fixed
 

src/components/datepicker/DatePicker.tsx

@@ -26,8 +26,12 @@ export interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size'
   selectedDate?: Date;
   /** Size of the DatePicker component. */
   size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
+  /** Show a dropdown for the month? */
   withMonthPicker?: boolean;
+  /** Show week numbers? */
   showWeekNumbers?: boolean;
+  /** The initial month to display if no date is selected. */
+  initialMonth?: Date;
 }
 
 const DatePicker: GenericComponent<DatePickerProps> = ({
@@ -37,6 +41,7 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
   size = 'medium',
   withMonthPicker,
   showWeekNumbers,
+  initialMonth,
   onChange,
   ...others
 }) => {
@@ -89,7 +94,7 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
       <DayPicker
         {...others}
         localeUtils={localeUtils}
-        initialMonth={others.selectedDate}
+        initialMonth={others.selectedDate ?? initialMonth}
         month={selectedMonth}
         className={classNames}
         classNames={theme as any}

src/components/datepicker/datePicker.stories.tsx

@@ -31,6 +31,7 @@ singleDate.args = {
   size: 'medium',
   withMonthPicker: true,
   showWeekNumbers: false,
+  initialMonth: new Date(),
 };
 singleDate.parameters = {
   design: [