0

.html snippet (LWC Component)

enter image description here

.js snippet (LWC Component)

import { LightningElement, track } from 'lwc';

export default class DateTimePickerLightningInput extends LightningElement {

@track today;

connectedCallback(){

    this.today = new Date().toLocaleString();

}

}

Outcome:

enter image description here enter image description here

As per the above outcome, the Current Locale DateTime = 10/19/2022, 5:50:37 PM. But, if you could see that the lightning-input with type=datetime component is considering the DateTime = Oct 19, 2022, 9:50:37 AM and thus the validation message is dependent on the DateTime Value = Oct 19, 2022, 9:50:37 AM.

Is there any way for the lightning-input component to consider the Current Locale DateTime = 10/19/2022, 5:50:37 PM based on the User Location / Region Timezone?

Thanks in Advance !!!

Outcome using Date().toISOString() as below:

enter image description here enter image description here

0

2 Answers 2

3

Try using this -

connectedCallback(){

    this.today = new Date().toISOString();

}
11
  • Then you can pass your variable today directly to apex with parameter type Datetime. Oct 19, 2022 at 18:17
  • I have tried your suggested line of code as well (i.e., this.today = new Date().toISOString();) but that too does not work !! Oct 19, 2022 at 21:11
  • You can also define timezone in input field. But as per my knowledge lwc considers current user timezone. for datetime fields. Can you share screenshot after the above changes? Oct 20, 2022 at 6:26
  • Alternately, you can send the today variable in apex with Datetime type parameter and return today.format() from apex with return type as string. Oct 20, 2022 at 6:28
  • Unfortunately, I could not add the screenshot in the comment section. But, I have added the screenshot after using toISOString() for reference in the description of this post itself. @Gaurav Suther Oct 21, 2022 at 11:15
-2

The below approach has helped to resolve the issue:

Approach:

  • Using 2 different lightning components for Date & Time with having the below logic implemented the issue was resolved.

  • Also, the Past Date & Time is disabled with the below Logic.

DisablePastDateTime.html

enter image description here

DisablePastDateTime.js

enter image description here

enter image description here

You must log in to answer this question.

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