datepicker: firstDayOfWeek and parseDateFromString

Author: RicoNL

docs/documentation/docs/controls/DateTimePicker.md

@@ -53,9 +53,11 @@ The `DateTimePicker` control can be configured with the following properties:
 | label | string | no | Property field label displayed on top. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
 | formatDate | function | no | Defines a formatDate function that can override the output value in Date picker. |
+| parseDateFromString | function | no | Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true |
 | dateConvention | DateConvention | no | Defines the date convention to use. The default is date and time.|
 | timeConvention | TimeConvention | no | Defines the time convention to use. The default value is the 24-hour clock convention. |
 | firstDayOfWeek | DayOfWeek | no | Specify the first day of the week for your locale. |
+| firstWeekOfYear | FirstWeekOfYear | no | Defines when the first week of the year should start. |
 | key | string | no | A unique key that indicates the identity of this control |
 | onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
 | showGoToToday | boolean | no | Controls whether the "Go to today" link should be shown or not |

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -227,13 +227,15 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       timeConvention,
       dateConvention = DateConvention.DateTime,
       firstDayOfWeek,
+      firstWeekOfYear,
       isMonthPickerVisible = true,
       showGoToToday,
       allowTextInput = true,
       showMonthPickerAsOverlay = false,
       showWeekNumbers = false,
       showSeconds = false,
       formatDate,
+      parseDateFromString,
       value = this.state.day,
       strings: dateStrings = new DateTimePickerStrings(), // Defines the DatePicker control labels
       timeDisplayControlType,
@@ -322,13 +324,15 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
             <div className={styles.picker}>
               <DatePicker
                 formatDate={formatDate}
+                parseDateFromString={parseDateFromString}
                 disabled={disabled}
                 value={value}
                 strings={dateStrings}
                 isMonthPickerVisible={isMonthPickerVisible}
                 onSelectDate={this.onSelectDate}
                 allowTextInput={allowTextInput}
                 firstDayOfWeek={firstDayOfWeek}
+                firstWeekOfYear={firstWeekOfYear}
                 showGoToToday={showGoToToday}
                 showMonthPickerAsOverlay={showMonthPickerAsOverlay}
                 showWeekNumbers={showWeekNumbers}

src/controls/dateTimePicker/IDateTimePickerProps.ts

@@ -1,3 +1,4 @@
+import { FirstWeekOfYear } from '@fluentui/react-northstar';
 import { DayOfWeek } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
 import { TimeConvention, DateConvention } from './DateTimeConventions';
 import { IDateTimePickerStrings } from './IDateTimePickerStrings';
@@ -24,6 +25,10 @@ export interface IDateTimePickerProps {
    * By defaut date.toDateString() is used.
    */
   formatDate?: (date: Date) => string;
+  /**
+  * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true
+  */
+  parseDateFromString?: (dateStr: string) => Date;
   /**
    * Defines the date convention to use. The default is date and time.
    */
@@ -36,6 +41,10 @@ export interface IDateTimePickerProps {
    * Specify the first day of the week for your locale.
    */
   firstDayOfWeek?: DayOfWeek;
+  /**
+  * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+  */
+  firstWeekOfYear?: FirstWeekOfYear
   /**
    * An UNIQUE key indicates the identity of this control
    */