#939

pnp · Jun 30, 2021 · 1c8d96a · 1c8d96a
1 parent a2c5e3c
commit 1c8d96a
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/docs/documentation/docs/controls/DateTimePicker.md b/docs/documentation/docs/controls/DateTimePicker.md
@@ -71,6 +71,7 @@ The `DateTimePicker` control can be configured with the following properties:
 | placeholder | string | no | Placeholder text for the DatePicker. |
 | maxDate | Date | no | The maximum allowable date. |
 | minDate | Date | no | The minimum allowable date. |
+| minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
 
 Enum `TimeDisplayControlType`
 
@@ -103,4 +104,9 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
 | amDesignator | string | no | Used as AM designator when 12-hour clock is used. |
 | pmDesignator | string | no | Used as PM designator when 12-hour clock is used. |
 
+Type `MinutesIncrement`
+```typescript
+type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
+```
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/DateTimePicker)
diff --git a/src/controls/dateTimePicker/DateTimePicker.tsx b/src/controls/dateTimePicker/DateTimePicker.tsx
@@ -211,7 +211,8 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       placeholder,
       showLabels,
       minDate,
-      maxDate
+      maxDate,
+      minutesIncrementStep
     } = this.props;
 
     const hours: number = value != null ? value.getHours() : this.state.hours;
@@ -242,6 +243,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
             <div className={styles.picker}>
               <MinutesComponent disabled={disabled}
                 value={minutes}
+                minutesIncrementStep={minutesIncrementStep}
                 onChange={this.dropdownMinutesChanged}
                 timeDisplayControlType={timeDisplayControlType || TimeDisplayControlType.Text} />
             </div>

diff --git a/src/controls/dateTimePicker/IDateTimePickerProps.ts b/src/controls/dateTimePicker/IDateTimePickerProps.ts
@@ -3,6 +3,8 @@ import { TimeConvention, DateConvention } from './DateTimeConventions';
 import { IDateTimePickerStrings } from './IDateTimePickerStrings';
 import { TimeDisplayControlType } from './TimeDisplayControlType';
 
+export type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
+
 /**
  * Public properties of the DateTimePicker custom field
  *
@@ -102,12 +104,12 @@ export interface IDateTimePickerProps {
    * Specify if labels in front of date and time parts should be rendered. True by default
    */
   showLabels?: boolean;
-  
+
   /**
    * Placeholder text for the DatePicker
    */
   placeholder?: string;
-  
+
   /**
    * The minimum allowable date for the DatePicker
    */
@@ -119,4 +121,9 @@ export interface IDateTimePickerProps {
    */
 
   maxDate?: Date;
+
+  /**
+   * Specifies minutes' increment step
+   */
+  minutesIncrementStep?: MinutesIncrement;
 }
diff --git a/src/controls/dateTimePicker/ITimeComponentProps.ts b/src/controls/dateTimePicker/ITimeComponentProps.ts
@@ -1,5 +1,6 @@
 import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
 import { TimeConvention } from './DateTimeConventions';
+import { MinutesIncrement } from './IDateTimePickerProps';
 import { TimeDisplayControlType } from './TimeDisplayControlType';
 
 /**
@@ -9,6 +10,7 @@ export interface ITimeComponentProps {
   disabled?: boolean;
   value: number;
   timeDisplayControlType?: TimeDisplayControlType;
+  minutesIncrementStep?: MinutesIncrement;
   onChange: (value?: string) => void;
 }
 

diff --git a/src/controls/dateTimePicker/MinutesComponent.tsx b/src/controls/dateTimePicker/MinutesComponent.tsx
@@ -16,7 +16,7 @@ export default class MinutesComponent extends React.Component<ITimeComponentProp
   constructor(props: ITimeComponentProps) {
     super(props);
 
-    this._initMinutesOptions();
+    this._initMinutesOptions(props.minutesIncrementStep || 1);
   }
 
   public render(): JSX.Element {
@@ -69,9 +69,10 @@ export default class MinutesComponent extends React.Component<ITimeComponentProp
     }
   }
 
-  private _initMinutesOptions() {
+  private _initMinutesOptions(step: number) {
+
     let minutes: IDropdownOption[] = [];
-    for (let j = 0; j < 60; j++) {
+    for (let j = 0; j < 60; j += step) {
       let digitMin: string;
       if (j < 10) {
         digitMin = '0' + j;

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1109,7 +1109,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
 
         <DateTimePicker label="DateTime Picker (unspecified = date and time)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} placeholder="Pick a date" />
-        <DateTimePicker label="DateTime Picker 12-hour clock" showSeconds={true} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker 12-hour clock" showSeconds={true} onChange={(value) => console.log("DateTimePicker value:", value)} timeDisplayControlType={TimeDisplayControlType.Dropdown} minutesIncrementStep={15} />
         <DateTimePicker label="DateTime Picker 24-hour clock" showSeconds={true} timeConvention={TimeConvention.Hours24} onChange={(value) => console.log("DateTimePicker value:", value)} />
         <DateTimePicker label="DateTime Picker no seconds" value={new Date()} onChange={(value) => console.log("DateTimePicker value:", value)} />
         <DateTimePicker label="DateTime Picker (unspecified = date and time)" timeConvention={TimeConvention.Hours24} value={new Date()} onChange={(value) => console.log("DateTimePicker value:", value)} />