1

Whenever I clear the time value, the datetime field shows the value with one day before the datetime that was orginally present. After clearing the value, when I add the value again, the event.detail.value is reverting to UTC. I am in IST Zone so it is substracting 5.30 hours Below is my code :

 handletimeChange (event) {
        this.timevalue = event.detail.value; 
 } 
handleTimevalueOnBlur(event) {
        if(this.timevalue != null && this.timevalue != undefined && this.timevalue != '') {
            event.target.reportValidity();
            if(!event.target.validity.valid) {
                this.timevalue = this.formatDateTime(this.timevalue);
            }
        }
    }
formatDateTime(datetime) {
        return datetime.slice(0, 10);
    }

HTML ::

 <lightning-input class="" type="datetime" name="time" label="date time" value={timevalue} onchange={handletimeChange} message-when-value-missing=" " message-when-bad-input=" " onblur={handleTimevalueOnBlur} required></lightning-input>

Always when I remove the time manually, it will show the date with one day before.

4
  • Is handletimeChange running when you clear it?
    – fred
    Jul 25, 2023 at 12:15
  • @fred When I clear it then the handleTimevalueOnBlur function is running onblur Jul 25, 2023 at 12:21
  • When I see the difference in the time that is selected and visible : Selection : Wed Jul 26 2023 01:15:00 GMT+0530 (India Standard Time) event.detail.value is taking = 2023-07-25T19:45:00.000Z , which is subtracting the UTC Offset @fred Jul 25, 2023 at 12:30
  • 1
    Would be worth updating your question to explain that you are using India Standard Time and that the date is reverting to UTC. Rather than just saying that it is appearing one day before. This is important context for the question.
    – fred
    Jul 25, 2023 at 12:55

1 Answer 1

1

While <lightning-input> will format your value in the user's current timezone (which you can override with the timezone property), it always returns the datetime in event.detail.value as an ISO-8601 formatted string (the same format as a JSON-encoded datetime), and always in GMT (using the Z timezone shorthand). This GMT time is equivalent to the selected date/time value.

Your issue is that you are then slicing that datetime string and re-assigning it. You are taking the first 10 characters of the string, which gets only the date part. For example, 2023-07-25T15:34:00.000Z becomes 2023-07-25. If you assign that 10-character date string to the <lightning-input>, it will be assumed to be midnight on that date, and without the TZ information, it is assumed to be midnight GMT, which is then converted to IST by the <lightning-input>.

Consider not changing the value, but allowing the warning displayed by reportValidity() to guide the user. Otherwise, you will need to modify the value you are assigning to be in the right tz. For example, if you know the user will always be in IST, you could try:

formatDateTime(datetime) {
    return datetime.slice(0, 10) + 'T00:00:00+05:30';
}

That should return not just the bare date, but that date at midnight IST. If you need to support multiple user timezones, you'll need to get the user's TZ offset, which you can do in JS:

const offset = new Date(). getTimezoneOffset();
8
  • How do I add const offset value to this statement : return datetime.slice(0, 10) + 'T00:00:00+05:30'; ? Jul 25, 2023 at 16:17
  • I am in IST Zone and when I print offset , it shows -330 ? What does this mean? Jul 25, 2023 at 16:20
  • return datetime.slice(0, 10) + 'T00:00:00+05:30'; - Using this only.. I am still seeing the value subtracted by 5.30 hours Jul 25, 2023 at 16:22
  • Offset of -330 means 330 minutes, or 5.5 hours. Not sure why the sign is reversed, but JS datetime support is weird. Jul 25, 2023 at 16:47
  • if 'T00:00:00+05:30' isn't working, try + 'T05:30:00Z' which should return midnight IST as a GMT timestamp. Jul 25, 2023 at 16:49

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .