Show only Time in PropertyFieldDateTimePicker

docs/documentation/docs/controls/PropertyFieldDateTimePicker.md

@@ -85,6 +85,7 @@ Enum `DateConvention`
 | ---- | ---- |
 | DateTime | Shows the date and time picker |
 | Date | Shows only the date picker |
+| Time | Shows only the time picker |
 
 Enum `TimeConvention`
 

src/propertyFields/dateTimePicker/IPropertyFieldDateTimePicker.ts

@@ -34,7 +34,8 @@ export enum TimeConvention {
 export enum DateConvention {
 
   DateTime = 1,
-  Date
+  Date,
+  Time
 }
 
 /**

src/propertyFields/dateTimePicker/PropertyFieldDateTimePickerHost.tsx

@@ -185,6 +185,13 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
    * Save the new date
    */
   private _saveDate(): void {
+    const { dateConvention } = this.props;
+
+    // If the DateConvention is Time, set the Date as today
+    if (dateConvention === DateConvention.Time) {
+      this._crntDate = new Date();
+    }
+
     // Check if the current date object exists
     if (this._crntDate === null) {
       return;
@@ -206,11 +213,14 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
 
     if (finalDate !== null) {
       let finalDateAsString: string = '';
+
       if (this.props.formatDate) {
         finalDateAsString = this.props.formatDate(finalDate);
-      } else {
-        finalDateAsString = finalDate.toString();
       }
+      else {
+        finalDateAsString = dateConvention === DateConvention.Time ? finalDate.toTimeString() : finalDate.toString();
+      }
+
       this.delayedValidate({
         value: finalDate,
         displayValue: finalDateAsString
@@ -297,7 +307,7 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
 
     // Check if the time element needs to be rendered
     let timeElm: JSX.Element = <tr />;
-    if (dateConvention === DateConvention.DateTime) {
+    if (dateConvention === DateConvention.DateTime || dateConvention === DateConvention.Time) {
       timeElm = (
         <tr>
           {showLabels && <td className={styles.labelCell}>
@@ -341,21 +351,23 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
         {label && <Label>{label}</Label>}
         <table cellPadding='0' cellSpacing='0'>
           <tbody>
-            <tr>
-              {showLabels && <td className={styles.labelCell}>
-                <Label className={styles.fieldLabel}>{strings.DateTimePickerDate}</Label>
-              </td>}
-              <td>
-                <DatePicker
-                  disabled={disabled}
-                  value={this.state.day}
-                  strings={dateStrings}
-                  isMonthPickerVisible={true}
-                  onSelectDate={this._onSelectDate}
-                  allowTextInput={false}
-                  firstDayOfWeek={this.props.firstDayOfWeek} />
-              </td>
-            </tr>
+            {dateConvention !== DateConvention.Time &&
+              <tr>
+                {showLabels && <td className={styles.labelCell}>
+                  <Label className={styles.fieldLabel}>{strings.DateTimePickerDate}</Label>
+                </td>}
+                <td>
+                  <DatePicker
+                    disabled={disabled}
+                    value={this.state.day}
+                    strings={dateStrings}
+                    isMonthPickerVisible={true}
+                    onSelectDate={this._onSelectDate}
+                    allowTextInput={false}
+                    firstDayOfWeek={this.props.firstDayOfWeek} />
+                </td>
+              </tr>
+            }
             {!!timeElm &&
               <tr>
                 <td className={styles.spacerRow} colSpan={showLabels ? 2 : 1}></td>
@@ -364,7 +376,6 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
           </tbody>
         </table>
 
-
         <FieldErrorMessage errorMessage={this.state.errorMessage} />
       </div >
     );