Up next in 10
Salesforce Lightning Web Component Date Validation
2K views
Oct 30, 2024
Blog Post: https://www.infallibletechie.com/2024/10/salesforce-lightning-web-component-date-validation.html
View Video Transcript
0:06
hello everyone in this video we are
0:09
going to see date validation in
0:11
Salesforce lightning web
0:14
component for example here in this start
0:17
date selection if I select any
0:21
date which is not Monday it will throw
0:25
me a validation error for example I'm
0:28
selecting OCT oober 1st which is uh
0:32
Tuesday it will throw me an error
0:34
stating that start date should be Monday
0:36
so I have to make sure I have to select
0:39
a date which is Monday so I'm selecting
0:43
7th October so it will not throw me an
0:45
error it will allow me to select the
0:48
particular date it was I was able to
0:51
select this date because the date is
0:54
Monday in the end date if I select uh uh
1:00
a date which is uh less than start date
1:03
it will throw me an error for example
1:05
here I'm selecting 1st September Which
1:08
is less than the start date so it will
1:09
throw me an error stating that end date
1:11
should be greater than start
1:13
date one more validation what I have
1:16
done here is I have selected October
1:21
7th um and uh now it should throw me an
1:25
error if I
1:26
select October 11 because I don't want
1:30
to select 5 days it should be 14 days
1:34
apart and it should be mult but and it
1:37
should be um uh it should be 14 days
1:41
apart or 28 days like that it should be
1:44
in multiples of uh 2 weeks apart for
1:47
example here since I have selected
1:49
October 7th it will allow me to select
1:52
October 18th because it is 2 weeks apart
1:56
no issues but if I select October 11th
1:58
it is not uh two weeks apart so it will
2:01
throw me an error saying that end date
2:03
should be Friday and different should be
2:04
in multiples of two weeks apart so this
2:07
is my validation for example here if I
2:10
select 25 it is 3 weeks apart so it will
2:12
not allow me to select if I select
2:16
first
2:17
um November it will allow me because it
2:20
is in it is four weeks apart and then it
2:22
is M and then it is in in uh it is like
2:26
four weeks apart so it will allow me to
2:28
s
2:31
so this is the validation rule um sorry
2:33
this is the lightning web component
2:34
which I have developed for this date
2:37
validations so I am I'm using two dates
2:40
one for start date and the other one is
2:42
for end
2:43
date I will
2:45
explain uh only the start date
2:48
validation you can definitely go through
2:50
the end date validation which is kind of
2:52
huge and um it will be somewhat uh
2:56
easier to understand if you understand
2:58
the start date validation so
3:01
whenever the date is changed it will
3:04
call this handle change method first I'm
3:07
checking whether it is start date or it
3:09
is end date if it is start
3:12
date I'm setting the selected date which
3:15
is a variable in JavaScript to new date
3:18
of even. target.
3:21
value I'm doing this so that it will
3:24
convert the date into my current uh time
3:27
zone I'm getting the time offset using
3:31
get time zone offset method from
3:33
JavaScript and then I'm finding the
3:35
difference I'm multiplying that by
3:37
60,000 and then I'm adding it to the
3:39
current daytime I wanted to do all the
3:41
validation in gmtr UTC so that that is
3:44
the reason I'm finding the offset
3:46
multiplying by 60,000 and then adding it
3:49
to the date using JavaScript get day
3:53
method and finding out what is the day
3:55
value if it is one then it is definitely
3:57
Monday so it will allow me to set the
4:00
value if I select any other date other
4:03
than one day it will throw me an error
4:05
it will set my start date to null end
4:08
date to null and I'm using set timeout
4:10
to set the start date and end date to
4:12
null because I wanted uh the values on
4:16
the HTML to be uh updated so I'm using a
4:19
set timeout so that it will be
4:22
reactive if they haven't selected this
4:25
uh uh start date uh I am setting the
4:28
start date value and end date value to
4:30
null same way I'm using set time out to
4:32
set the values to null for example here
4:36
if I select if I um remove it it should
4:40
remove the end date also so I'm making
4:43
sure I'm I'm removing the end date and
4:46
as well as the start date value to
4:48
null same way I'm doing it for end date
4:52
also you can go through this um in order
4:55
to get the sample JavaScript code and or
4:58
the entire liting web component code for
5:00
your reference please check the video
5:03
description in the video description I
5:05
have shared my blog post from the blog
5:07
post you should be able to get this
5:09
complete sample code for your
5:16
reference I hope it was
5:22
helpful thank you for
5:28
watching e
#Internet Software