fix (dashboard): display the selected date's month in the datetime picker component (#3276)

### **PR Type**
Bug fix


___

### **Description**
- Fix datetime picker to display selected date's month

- Add defaultMonth prop to Calendar component

- Update changeset for @nhost/dashboard package


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>calendar.tsx</strong><dd><code>Set default month in
Calendar component</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></summary>
<hr>

dashboard/src/components/ui/v3/calendar.tsx

- Added `defaultMonth={props.selected}` to Calendar component


</details>


  </td>
<td><a
href="https://github.com/nhost/nhost/pull/3276/files#diff-63f846015a12e66f0c36ec550d502d6d00a250959957652d14460807f1fbe68d">+1/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr><tr><td><strong>Documentation</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>stupid-sloths-poke.md</strong><dd><code>Add changeset
for dashboard package update</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

.changeset/stupid-sloths-poke.md

<li>Added changeset file for @nhost/dashboard package<br> <li> Described
fix for datetime picker component


</details>


  </td>
<td><a
href="https://github.com/nhost/nhost/pull/3276/files#diff-4f6398b11015521b2039034f4ae61cd1ac5870421f1a52ddbf11f209aa141230">+5/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>

.changeset/stupid-sloths-poke.md

@@ -0,0 +1,5 @@
+---
+'@nhost/dashboard': patch
+---
+
+fix (dashboard): Display the selected date's month in the datetime picker component

dashboard/src/components/common/DateTimePicker/DateTimePicker.tsx

@@ -127,6 +127,7 @@ function DateTimePicker({
             <Calendar
               mode="single"
               selected={date}
+              defaultMonth={date}
               onSelect={(d) => handleSelect(d)}
               disabled={isCalendarDayDisabled}
               timeZone={timezone}

dashboard/src/components/ui/v3/calendar.tsx

@@ -42,6 +42,7 @@ export type CalendarProps = DayPickerProps & {
   disabledClassName?: string;
   rangeMiddleClassName?: string;
   hiddenClassName?: string;
+  defaultMonth: Date;
 };
 
 /**
@@ -54,6 +55,7 @@ function Calendar({
   className,
   showOutsideDays = true,
   numberOfMonths,
+  defaultMonth,
   ...props
 }: CalendarProps) {
   const monthsClassName = cn('relative flex', props.monthsClassName);
@@ -170,6 +172,7 @@ function Calendar({
           return <Icon className="h-4 w-4" />;
         },
       }}
+      defaultMonth={defaultMonth}
       {...props}
     />
   );