Error on dateRangePicker

[Fernando Haring]

Hi all, im using Date Range Picker feature but after some update i have an error that prevent to open the calendar popup. i tried everything i found but nothing works 

import React, { FunctionComponent } from 'react';

import 'react-date-range/dist/styles.css'; // main style file

import 'react-date-range/dist/theme/default.css'; // theme css file

import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';

import dayjs from 'dayjs';

import { ShowAnalisisHistorico } from '@webapp/store/analisis-relativo/analisis-historico/action-creators';

import { useDispatch } from 'react-redux';

import { userLocale } from './format-money';

import { loadCldr, L10n } from '@syncfusion/ej2-base';

interface DateRangePickerProps {

className?: string;

}

declare const require: any;

loadCldr(

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

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

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

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

);

//Load the L10n from ej2-base

//load the locale object to set the localized placeholder value

L10n.load({

de: {

datepicker: {

placeholder: 'Wählen Sie ein Datum',

today: 'heute',

},

},

});

const DateRangePicker: FunctionComponent<DateRangePickerProps> = () => {

const dispatch = useDispatch();

const startValue = new Date(localStorage.getItem('startDate') || dayjs().subtract(1, 'year').format('YYYY-MM-DD'));

const endValue = new Date(localStorage.getItem('endDate') || dayjs().format('YYYY-MM-DD'));

const onChange = (args: any) => {

localStorage.setItem('startDate', dayjs(args.value[0]).format('YYYY-MM-DD'));

localStorage.setItem('endDate', dayjs(args.value[1]).format('YYYY-MM-DD'));

dispatch(new ShowAnalisisHistorico());

};

return (

<DateRangePickerComponent

id="datepicker"

cssClass="e-calendar-blue"

delayUpdate={true}

placeholder="Seleccione Rango de Fechas"

width={200}

startDate={startValue}

endDate={endValue}

strictMode={true}

onChange={onChange}

format="dd/MM/yyyy"

separator=" / "

locale={userLocale.includes('es') ? 'es-AR' : 'en-US'}

openOnFocus={true}

/>

);

};

export default DateRangePicker;


this is my component and everytime i press the calendat icon i receive this error on console.

[Buvana Sathasivam]

Hi Fernando,

Greetings from Syncfusion support.

We are validating your reported query. We will update you with further details on or before Sep 26, 2022.

Regards,

Buvana S

[UdhayaKumar Duraisamy]

Hi Fernando,

Based on your shared information with error details, we suspect that your application not loading the culture JSON files. Which is the reason the replicated issue is occur.

Please find the code example:

import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';

import * as React from "react";

import './App.css';

import { loadCldr, L10n } from "@syncfusion/ej2-base";

 

import * as gregorian from 'cldr-data/main/de/ca-gregorian.json';

import * as numbers from 'cldr-data/main/de/numbers.json';

import * as timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';

import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';

import * as weekData from 'cldr-data/supplemental/weekData.json';// To load the culture based first day of week

 

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData);

L10n.load({

  'de': {

      'daterangepicker': {

          applyText: 'Sich bewerben',

          cancelText: 'Stornieren',

          customRange: 'benutzerdefinierten Bereich',

          days: 'Tage',

          endLabel: 'Wählen Sie Enddatum',

          placeholder: 'Wählen Sie einen Bereich aus',

          selectedDays: 'Ausgewählte Tage',

          startLabel: 'Wählen Sie Startdatum'

      }

  }

});

 

function App() {

  return (

    <div className="App">

     <DateRangePickerComponent id="daterangepicker" locale='de'/>

    </div>

  );

}

 

export default App;

 

 

To know more about globalization, please refer to the documentation: https://ej2.syncfusion.com/react/documentation/daterangepicker/globalization/

If still you have faced the issue, then please replicate the reported issue in the sample and revert us with details of the issue replicated replication procedure. These details will help us to provide an exact solution as earlier as possible.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D

Attachment: Globalization_65f01c10.zip