DateTimePicker switches month/day on manual input

[RicoNL]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.5.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Manual input on DateTimePicker respects locale settings for day/month

Observed Behavior

When using manual input of date, the day and month are switched when locale settings are set to Dutch and using Dutch input format (dd-mm-yyyy).

Steps to Reproduce

• create empty spfx webpart 1.13.1

• add datetimepicker with dutch locale
  

• test the datetimepicker
  05-11-2022 should be translated as 05 nov. 2022,
  

but is set as 11 mei (may) 2022

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[joelfmrodrigues]

@RicoNL sorry for the very long delay on this. Could you please double-check with the latest release? If still an issue, would you be able to try to fix and submit a pull-request?

[RicoNL]

@joelfmrodrigues I will look into it.

[RicoNL]

Utilizing the parseDateFromString-property (see PR #1465), the correct date can be parsed. Sample code:

private onParseDateFromString(dateStr: string): Date {
let locale = this.props.context.pageContext.cultureInfo.currentCultureName;

let dateArray: string[];
let day: string = null;
let month: string = null;
let year: string = null;
let date: Date = null;

if (locale.toLowerCase() === "nl-nl") {
  // based on date-notation 'dd-mm-yyyy'
  dateArray = dateStr.split("-");
  day = dateArray[0].length === 1 ? `0${dateArray[0]}` : dateArray[0];
  month = dateArray[1].length === 1 ? `0${dateArray[1]}` : dateArray[1];
  year = dateArray[2].length === 2 ? `20${dateArray[2]}` : dateArray[2];

  date = new Date(year + "-" + month + "-" + day + "T00:00:00" ); 
} else {
  date = new Date(dateStr); 
}

return date;

}