Added support to date field in FieldCollectionData

Author: GuidoZam

src/controls/fieldCollectionData/ICustomCollectionField.ts

@@ -74,5 +74,6 @@ export enum CustomCollectionFieldType {
   dropdown,
   fabricIcon,
   url,
+  date,
   custom
 }

src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx

@@ -14,6 +14,7 @@ import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
 import { Guid } from '@microsoft/sp-core-library';
 import { FieldValidator } from '../FieldValidator';
+import { DatePicker } from 'office-ui-fabric-react';
 
 export class CollectionDataItem extends React.Component<ICollectionDataItemProps, ICollectionDataItemState> {
   private emptyItem: any = null; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -385,6 +386,16 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
           onGetErrorMessage={async (value: string) => this.urlFieldValidation(field, value, item)}
           inputClassName="PropertyFieldCollectionData__panel__url-field" />;
+      case CustomCollectionFieldType.date:
+        return <DatePicker
+          className={styles.collectionDataField}
+          placeholder={field.placeholder || field.title}
+          isRequired={field.required}
+          disabled={disableFieldOnEdit}
+          value={item[field.id] ? new Date(item[field.id]) : undefined}
+          onSelectDate={(date) => { this.onValueChanged(field.id, date) }}
+          formatDate={(date) => { return date ? date?.toLocaleDateString() : ""; }}
+          />;
       case CustomCollectionFieldType.custom:
         if (field.onCustomRender) {
           return field.onCustomRender(field, item[field.id], this.onValueChanged, item, item.uniqueId, this.onCustomFieldValidation);

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -2006,7 +2006,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             key={"FieldCollectionData"}
             label={"Fields Collection"}
             itemsPerPage={3}
-            manageBtnLabel={"Manage"} onChanged={(value) => { console.log(value); }}
+            manageBtnLabel={"Manage"}
+            onChanged={(value) => { console.log(value); }}
             panelHeader={"Manage values"}
             enableSorting={true}
             panelProps={{ type: PanelType.custom, customWidth: "98vw" }}
@@ -2015,6 +2016,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               { id: "Field2", title: "Number field", type: CustomCollectionFieldType.number },
               { id: "Field3", title: "URL field", type: CustomCollectionFieldType.url },
               { id: "Field4", title: "Boolean field", type: CustomCollectionFieldType.boolean },
+              { id: "Field5", title: "Date field", type: CustomCollectionFieldType.date, placeholder: "Select a date" }
             ]}
             value={this.getRandomCollectionFieldData()}
           />
@@ -2610,7 +2612,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
   private getRandomCollectionFieldData = () => {
     let result = [];
     for (let i = 1; i < 16; i++) {
-      result.push({ "Field1": `String${i}`, "Field2": i, "Field3": "https://pnp.github.io/", "Field4": true });
+      const sampleDate = new Date();
+      sampleDate.setDate(sampleDate.getDate() + i);
+      result.push({ "Field1": `String${i}`, "Field2": i, "Field3": "https://pnp.github.io/", "Field4": true, "Field5": sampleDate });
     }
     return result;
   }