lightning-input type date time picks incorrect time value

Question

I'm using lightning-input type="datetime" to take datetime input from a user inside a lightning web component. I initially bind the value returned from back-end to the input. It displays the correct date-time value fetched from back-end on the date-time picket.

However, when I call a js method on change of input, it fetches incorrect value.

So, in my case I'm displaying 12:00 PM to the user initially (fetched from back-end sfdc record). Now, if user updates the value to 12:15 PM, the handler updates the value on change. I use console to see the updated value and it displays 19:15 instead of 12:15 PM.. any idea why?

Below is the code snippet:

    <lightning-input type="datetime"
                                    label="Last Date"
                                    value={endDate}
                                    onchange={captureDateTimeChange}>
                    </lightning-input>

JS:

captureDateTimeChange(event){
    console.log('DateTime : ' ,event.target.value);
}

Selected DateTime from datetime picker

Captured Date in js method:

What's causing the js method to pick incorrect date ?

Answer 1

It is converting to UTC time. Whatever shown to you is depends on user's locale. E.g. Users locale is set to GMT +5:00, he'll see 5:00 PM, where as time is stored as 12:00PM.

Please find the text from documentation -

A datetime field includes a text input to type a date and a date picker to select a date, and similar fields for typing or picking a time. Your Salesforce locale setting determines the acceptable date and time formats. Your Salesforce language setting determines the names of months and weekdays that the date picker displays.

The date and time you enter are automatically validated against your Salesforce locale format during the blur event. The date and time displayed reflect your Salesforce time zone setting. Use the timezone attribute to specify a different time zone in IANA time zone database format. For example, specify timezone="America/New_York" for US Eastern Time or timezone="GMT" for Greenwich Mean Time.