Skip to content

Commit 73e089f

Browse files
git push origin devMerge branch 'srpmtt-datetimepicker-restricted-dates' into dev
2 parents 1481344 + 2013506 commit 73e089f

File tree

4 files changed

+37
-5
lines changed

4 files changed

+37
-5
lines changed

docs/documentation/docs/controls/DateTimePicker.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Here are some examples of the control:
2727
```TypeScript
2828
import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
2929
```
30+
3031
- Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component:
3132

3233
```TypeScript
@@ -47,7 +48,6 @@ import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-contro
4748

4849
The `DateTimePicker` control can be configured with the following properties:
4950

50-
5151
| Property | Type | Required | Description |
5252
| ---- | ---- | ---- | ---- |
5353
| label | string | no | Property field label displayed on top. |
@@ -72,12 +72,13 @@ The `DateTimePicker` control can be configured with the following properties:
7272
| timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
7373
| showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
7474
| placeholder | string | no | Placeholder text for the DatePicker. |
75-
| initialPickerDate | Date | no | The initially highlighted date in the calendar picker
75+
| initialPickerDate | Date | no | The initially highlighted date in the calendar picker |
7676
| maxDate | Date | no | The maximum allowable date. |
7777
| minDate | Date | no | The minimum allowable date. |
7878
| minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
79-
| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false
80-
| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent'
79+
| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false |
80+
| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent' |
81+
| restrictedDates | Date[] | no | If set the Calendar will not allow selection of dates in this array. |
8182

8283
Enum `TimeDisplayControlType`
8384

@@ -112,6 +113,7 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
112113
| textErrorMessage | string | no | Error message when text is entered in the date picker. |
113114

114115
Type `MinutesIncrement`
116+
115117
```typescript
116118
type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
117119
```

src/controls/dateTimePicker/DateTimePicker.tsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22
import { isEqual } from '@microsoft/sp-lodash-subset';
33
import { TimeConvention, DateConvention } from "./DateTimeConventions";
4+
import { Calendar } from "@fluentui/react/lib/Calendar";
45
import { DatePicker } from "@fluentui/react/lib/DatePicker";
56
import { Label } from "@fluentui/react/lib/Label";
67
import { IconButton } from "@fluentui/react/lib/Button";
@@ -246,14 +247,34 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
246247
maxDate,
247248
minutesIncrementStep,
248249
showClearDate = false,
249-
showClearDateIcon = 'RemoveEvent'
250+
showClearDateIcon = 'RemoveEvent',
251+
restrictedDates = []
250252
} = this.props;
251253

252254
const { textErrorMessage } = dateStrings;
253255
const hours: number = value !== null ? value.getHours() : this.state.hours;
254256
const minutes: number = value !== null ? value.getMinutes() : this.state.minutes;
255257
const seconds: number = value !== null ? value.getSeconds() : this.state.seconds;
256258

259+
const CalendarView = (): JSX.Element => {
260+
return (
261+
<Calendar
262+
value={initialPickerDate}
263+
strings={dateStrings}
264+
isMonthPickerVisible={isMonthPickerVisible}
265+
onSelectDate={this.onSelectDate}
266+
firstDayOfWeek={firstDayOfWeek}
267+
firstWeekOfYear={firstWeekOfYear}
268+
showGoToToday={showGoToToday}
269+
showMonthPickerAsOverlay={showMonthPickerAsOverlay}
270+
showWeekNumbers={showWeekNumbers}
271+
minDate={minDate}
272+
maxDate={maxDate}
273+
restrictedDates={restrictedDates}
274+
/>
275+
);
276+
};
277+
257278
// Check if the time element needs to be rendered
258279
let timeElm: JSX.Element = <div className="hidden" />;
259280

@@ -341,6 +362,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
341362
initialPickerDate={initialPickerDate}
342363
minDate={minDate}
343364
maxDate={maxDate}
365+
calendarAs={restrictedDates.length ? CalendarView : undefined}
344366
textField={{
345367
onChange: (e, newValue) => this.handleTextChange(e, newValue, textErrorMessage)
346368
}}

src/controls/dateTimePicker/IDateTimePickerProps.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,10 @@ export interface IDateTimePickerProps {
153153
* Icon used for clearDate iconbutton. Defaults to RemoveEvent
154154
*/
155155
showClearDateIcon?: string;
156+
157+
/**
158+
* If set the Calendar will not allow selection of dates in this array.
159+
*/
160+
restrictedDates?: Date[];
161+
156162
}

src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1299,6 +1299,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
12991299
/>
13001300

13011301
<DateTimePicker label="DateTime Picker (disabled)" disabled={true} />
1302+
1303+
<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)]}/>
13021304
</div>
13031305
<div id="RichTextDiv" className={styles.container} hidden={!controlVisibility.RichText}>
13041306
{/* <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.richTextValue = value; return value; }} /> */}

0 commit comments

Comments
 (0)