DateTimePicker show date incorrect

[Thi Xuan Thao]

Hi ,

Today is 3/08/2023. I tried to create 2  DateTimePicker  controls  as code below 

const effDate2 = new Date( "2023-03-03");

   

consttoday = newDate();

 <div className="mb-3">

                  <Label> Effective Date </Label>

                  <DatePicker name = 'effectiveDate' value ={effDate2} onChange={handleDatePickerChange} />

                 

                </div>

                <div className="mb-3">

                  <Label> Today  </Label>

                  <DatePicker name = 'today' value ={today} onChange={handleDatePickerChange} />

                 

                </div>

 

The Effective Date control show :   while the Today Date show  

 

Can you pls advise me why the value of Effective Date changed ? 

Thanks,
Thao Phan

 

[Nitin]

I am also observing the similar issue. Also on mouse hover on back months, it is showing the incorrect date on mouse hover.

[Vessy]

Hello, Thao Phan,

I tested the provided snippets but the DatePickers show the passed dates properly at my side:

Can you test the demo below and see whether you get the same result as well?

• https://stackblitz.com/edit/react-uuhujy?file=app%2Fmain.jsx

Regards,
Vessy
Progress Telerik

[Thi Xuan Thao]

Hi Vessy,

Here is what I run on my Chrome browser .

 

Thanks,
Thao Phan 

[Vessy]

Hi, Thao,

Thank you for the provided screenshot.

Most probably the different result is caused due to a difference in the local time in which the Date() object is initialized. Can you try using an `IntlProvider` provider in order to load a specific locale to the page and let me know the result?:

• https://www.telerik.com/kendo-react-ui/components/intl/i18n/ 

You can test this approach here:

• https://stackblitz.com/edit/react-lbbhpy?file=app%2Fmain.jsx

 

[Thi Xuan Thao]

Hi Vessy,

I tried your example on 2 computers . One is my company laptop and one is my personal one. Thay have the same result . Pls have a look on my screen shot 

Thanks,
Thao Phan

[Vessy]

Hi, guys,

The date returned by `new Date()` depends on the date format passed to the Date() constructor and it defaults to UTC. If you are in a different time zone, you can use a more-precised format like `new Date('2016-09-05T00:00')` to create the date object in local time. You can read details on this matter here:

• https://stackoverflow.com/questions/39223481/incorrect-date-shown-in-new-date-in-javascript 
  

For example, you can try the following syntax:

• https://stackblitz.com/edit/react-lbbhpy-z2ko8k?file=app%2Fmain.jsx 

Regards,
Vessy
Progress Telerik