git push origin devMerge branch 'srpmtt-datetimepicker-restricted-dates' into dev

Author: jrodriguesStorm

docs/documentation/docs/controls/DateTimePicker.md

@@ -27,6 +27,7 @@ Here are some examples of the control:
 ```TypeScript
 import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
 ```
+
 - Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component:
 
 ```TypeScript
@@ -47,7 +48,6 @@ import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-contro
 
 The `DateTimePicker` control can be configured with the following properties:
 
-
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | label | string | no | Property field label displayed on top. |
@@ -72,12 +72,13 @@ The `DateTimePicker` control can be configured with the following properties:
 | timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
 | showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
 | placeholder | string | no | Placeholder text for the DatePicker. |
-| initialPickerDate | Date | no | The initially highlighted date in the calendar picker
+| initialPickerDate | Date | no | The initially highlighted date in the calendar picker |
 | maxDate | Date | no | The maximum allowable date. |
 | minDate | Date | no | The minimum allowable date. |
 | minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
-| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false
-| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent'
+| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false |
+| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent' |
+| restrictedDates | Date[] | no | If set the Calendar will not allow selection of dates in this array. |
 
 Enum `TimeDisplayControlType`
 
@@ -112,6 +113,7 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
 | textErrorMessage | string | no | Error message when text is entered in the date picker. |
 
 Type `MinutesIncrement`
+
 ```typescript
 type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
 ```

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { isEqual } from '@microsoft/sp-lodash-subset';
 import { TimeConvention, DateConvention } from "./DateTimeConventions";
+import { Calendar } from "@fluentui/react/lib/Calendar";
 import { DatePicker } from "@fluentui/react/lib/DatePicker";
 import { Label } from "@fluentui/react/lib/Label";
 import { IconButton } from "@fluentui/react/lib/Button";
@@ -246,14 +247,34 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       maxDate,
       minutesIncrementStep,
       showClearDate = false,
-      showClearDateIcon = 'RemoveEvent'
+      showClearDateIcon = 'RemoveEvent',
+      restrictedDates = []
     } = this.props;
 
     const { textErrorMessage } = dateStrings;
     const hours: number = value !== null ? value.getHours() : this.state.hours;
     const minutes: number = value !== null ? value.getMinutes() : this.state.minutes;
     const seconds: number = value !== null ? value.getSeconds() : this.state.seconds;
 
+    const CalendarView = (): JSX.Element => {
+      return (
+        <Calendar
+          value={initialPickerDate}
+          strings={dateStrings}
+          isMonthPickerVisible={isMonthPickerVisible}
+          onSelectDate={this.onSelectDate}
+          firstDayOfWeek={firstDayOfWeek}
+          firstWeekOfYear={firstWeekOfYear}
+          showGoToToday={showGoToToday}
+          showMonthPickerAsOverlay={showMonthPickerAsOverlay}
+          showWeekNumbers={showWeekNumbers}
+          minDate={minDate}
+          maxDate={maxDate}
+          restrictedDates={restrictedDates}
+        />
+      );
+    };
+
     // Check if the time element needs to be rendered
     let timeElm: JSX.Element = <div className="hidden" />;
 
@@ -341,6 +362,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
                 initialPickerDate={initialPickerDate}
                 minDate={minDate}
                 maxDate={maxDate}
+                calendarAs={restrictedDates.length ? CalendarView : undefined}
                 textField={{
                   onChange: (e, newValue) => this.handleTextChange(e, newValue, textErrorMessage)
                 }}

src/controls/dateTimePicker/IDateTimePickerProps.ts

@@ -153,4 +153,10 @@ export interface IDateTimePickerProps {
    * Icon used for clearDate iconbutton. Defaults to RemoveEvent
    */
   showClearDateIcon?: string;
+
+  /**
+   * If set the Calendar will not allow selection of dates in this array.
+   */
+  restrictedDates?: Date[];
+
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1299,6 +1299,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           />
 
           <DateTimePicker label="DateTime Picker (disabled)" disabled={true} />
+
+          <DateTimePicker label="DateTime Picker (restricted dates)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} placeholder="Pick a date" restrictedDates={[new Date(2024,1,15), new Date(2024,1,16), new Date(2024,1,17)]}/>
         </div>
         <div id="RichTextDiv" className={styles.container} hidden={!controlVisibility.RichText}>
           {/* <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.richTextValue = value; return value; }} /> */}