DateTimePicker show date incorrect

2 Answers 179 Views

DateTimePicker

Thi Xuan Thao asked on 08 Mar 2023, 06:39 PM

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

commented on 24 May 2023, 04:09 PM

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

2 Answers, 1 is accepted

Thi Xuan Thao

commented on 10 Mar 2023, 04:24 PM

Hi Vessy,

Here is what I run on my Chrome browser .

Thanks,
Thao Phan

Vessy

commented on 14 Mar 2023, 01:22 PM

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

commented on 14 Mar 2023, 01:41 PM

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

answered on 26 May 2023, 03:23 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

DateTimePicker show date incorrect

2 Answers, 1 is accepted