implemented a way to use the webs regional settings for the first day of the week in the datepicker controls in the dynamic form

Author: SmarterJB

src/controls/dynamicForm/DynamicForm.tsx

@@ -330,6 +330,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       let order: number = 0;
       const responseValue = listFeilds.value;
       const hiddenFields = this.props.hiddenFields !== undefined ? this.props.hiddenFields : [];
+      let defaultDayOfWeek: number = 0;
       for (let i = 0, len = responseValue.length; i < len; i++) {
         const field = responseValue[i];
 
@@ -436,7 +437,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             const schemaXml = field.SchemaXml;
             const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
             dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';
-
+            defaultDayOfWeek = (await this._spService.getRegionalWebSettings()).FirstDayOfWeek;
           }
           else if (fieldType === "UserMulti") {
             if (item !== null)
@@ -492,6 +493,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             Order: field.order,
             isRichText: richText,
             dateFormat: dateFormat,
+            firstDayOfWeek: defaultDayOfWeek,
             listItemId: listItemId,
             principalType: principalType,
             description: field.Description

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -72,6 +72,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       isRichText,
       //bingAPIKey,
       dateFormat,
+      firstDayOfWeek,
       columnInternalName,
       principalType,
       description
@@ -302,6 +303,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               value={(changedValue !== null && changedValue !== "") ? changedValue : defaultValue}
               onSelectDate={(newDate) => { this.onChange(newDate); }}
               disabled={disabled}
+              firstDayOfWeek={firstDayOfWeek}
             />}
           {
             dateFormat === 'DateTime' &&
@@ -311,7 +313,9 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               formatDate={(date) => { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }}
               value={(changedValue !== null && changedValue !== "") ? changedValue : defaultValue}
               onChange={(newDate) => { this.onChange(newDate); }}
-              disabled={disabled} />
+              disabled={disabled}
+              firstDayOfWeek={firstDayOfWeek}
+            />
           }
           {descriptionEl}
           {errorTextEl}

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -29,6 +29,7 @@ export interface IDynamicFieldProps {
   Order: number;
   isRichText?: boolean;
   dateFormat?: DateFormat;
+  firstDayOfWeek: number;
   additionalData?: FieldChangeAdditionalData;
   principalType?:string;
   description?: string;

src/services/SPService.ts

@@ -679,6 +679,16 @@ export default class SPService implements ISPService {
     return result;
   }
 
+  public async getRegionalWebSettings(webUrl?: string): Promise<any> {
+    const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
+    const apiRequestPath = "/_api/web/regionalsettings";
+
+    const apiUrl = urlCombine(webAbsoluteUrl, apiRequestPath, false);
+    const response = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
+    const result = await response.json();
+    return result;
+  }
+
   private _filterListItemsFieldValuesAsText(items: any[], internalColumnName: string, filterText: string | undefined, substringSearch: boolean): any[] { // eslint-disable-line @typescript-eslint/no-explicit-any
     const lowercasedFilterText = filterText.toLowerCase();