locale="en-GB" results in an error and does not set firstDayOfWeek to Monday

[Gez]

I've set the locale of the datepicker to en-GB and I've loaded the data correctly using CLDR.  I get an error in the console:

```

calendar.js:279 Uncaught TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at DatePickerComponent.CalendarBase.getCultureValues (calendar.js:279)

    at DatePickerComponent.CalendarBase.createContentHeader (calendar.js:315)

    at DatePickerComponent.CalendarBase.createContent (calendar.js:262)

    at DatePickerComponent.Calendar.createContent (calendar.js:2114)

    at DatePickerComponent.CalendarBase.render (calendar.js:134)

    at DatePickerComponent.Calendar.render (calendar.js:1999)

    at DatePickerComponent.DatePicker.disabledDates (datepicker.js:1595)

    at DatePickerComponent.DatePicker.updateInput (datepicker.js:217)

    at DatePickerComponent.DatePicker.initialize (datepicker.js:140)

    at DatePickerComponent.DatePicker.render (datepicker.js:85)

    at DatePickerComponent.render (datepicker.component.js:32)

    at DatePickerComponent.Component.appendTo (component.js:148)

    at DatePickerComponent.ComponentBase.renderReactComponent (component-base.js:72)

```

When looking into it, it seems as though it fails on line 1533 in calendar.js:

```

getValue(mainVal + '' + this.locale + gregorianFormat, ld)

```

the values passed to the function are:
1st arg: main.en-GB.dates.calendars.gregorian.days.format.short

2nd arg: {

1. default:
1. main:
1. en-GB:
1. dates:
1. calendars:
1. gregorian:
1. dateFormats: {full: "EEEE, d MMMM y", long: "d MMMM y", medium: "d MMM y", short: "dd/MM/y"}
2. dateTimeFormats: {full: "{1} 'at' {0}", long: "{1} 'at' {0}", medium: "{1}, {0}", short: "{1}, {0}", availableFormats: {…}, …}
3. dayPeriods: {format: {…}, stand-alone: {…}}
4. days:
1. format:
1. abbreviated: {sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", …}
2. narrow: {sun: "S", mon: "M", tue: "T", wed: "W", thu: "T", …}
3. short:
1. fri: "Fr"
2. mon: "Mo"
3. sat: "Sa"
4. sun: "Su"
5. thu: "Th"
6. tue: "Tu"
7. wed: "We"
8. __proto__: Object
4. wide: {sun: "Sunday", mon: "Monday", tue: "Tuesday", wed: "Wednesday", thu: "Thursday", …}
5. __proto__: Object
2. stand-alone: {abbreviated: {…}, narrow: {…}, short: {…}, wide: {…}}
3. __proto__: Object
5. eras: {eraNames: {…}, eraAbbr: {…}, eraNarrow: {…}}
6. months: {format: {…}, stand-alone: {…}}
7. quarters: {format: {…}, stand-alone: {…}}
8. timeFormats: {full: "HH:mm:ss zzzz", long: "HH:mm:ss z", medium: "HH:mm:ss", short: "HH:mm"}
9. __proto__: Object
2. __proto__: Object
2. timeZoneNames: {hourFormat: "+HH:mm;-HH:mm", gmtFormat: "GMT{0}", gmtZeroFormat: "GMT", regionFormat: "{0} Time", regionFormat-type-daylight: "{0} Daylight Time", …}
3. __proto__: Object
2. identity: {version: {…}, language: "en", territory: "GB"}
3. numbers: {defaultNumberingSystem: "latn", otherNumberingSystems: {…}, minimumGroupingDigits: "1", symbols-numberSystem-latn: {…}, decimalFormats-numberSystem-latn: {…}, …}
4. __proto__: Object
2. __proto__: Object
2. supplemental: {version: {…}, numberingSystems: {…}, weekData: {…}}

}

If I change the 1st arg so that it is prepended with 'default." the error goes but the calendar still doesn't show Monday as the first day of the week, which I would expect because I am loading the weekData.json which states that the "firstDay" value for "GB" is "mon".

Please can you look into the above issues and let me know what I can do to get datepicker to correctly display the first day of the week as Monday when I pass in the locale as "en-GB".

Thank you

Gez

[Ponmani Murugaiyan]

 Hi Gez, 

Greetings from Syncfusion support. 

We have validated your reported issue. We have prepared sample based on your provided information. But unfortunately the reported issue is not reproduced in our end. Also, we suggest you to use the below code to get the first day of week as per requirement. 

loadCldr( 

  require('cldr-data/supplemental/numberingSystems.json'), 

  require('cldr-data/main/en-GB/ca-gregorian.json'), 

  require('cldr-data/main/en-GB/numbers.json'), 

  require('cldr-data/main/en-GB/timeZoneNames.json'),  

  require('cldr-data/supplemental/weekData.json')); // To load the culture based first day of week 

 

   

L10n.load({ 

  'en-GB': { 

    datetimepicker: { 

          placeholder: "Wählen Sie ein Datum", 

          today:"heute" 

      } 

  } 

}); 

class App extends Component { 

  render() { 

    return <DatePickerComponent id="datepicker" locale="en-GB"/> 

  } 

} 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePickerGlobalization-1580955161  

Documentation: https://ej2.syncfusion.com/react/documentation/datepicker/globalization/ 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Gez]

Hi,

Thanks for your response.  I re-installed the packages and used the require syntax in the loadCldr function.  That seems to have done the trick.

Thank you for your help!

Gez

[Ponmani Murugaiyan]

Hi Gez, 

Thanks for the update. 

We are glad to hear that the provided suggestion helped you in achieving your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M