Up next in 10
Angular ngx-material-timepicker Example to Embed Material Timepicker Input Field in TypeScript
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-material-timepicker-example-to-embed-material-timepicker-input-field-in-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you how to
0:04
integrate this material uh time picker
0:06
date field inside your angular
0:09
application so as you click this field
0:11
right here this model window will open
0:13
and you will be able to select the time
0:16
here this is in both 24 hours format or
0:20
12 hours format so easily from this you
0:24
can easily select the time
0:26
here using this model window and uh it's
0:30
a
0:32
material design input field so as you
0:36
select the time click on okay so you
0:38
will see the time will automatically get
0:40
selected in this input field so there is
0:43
this package here that we are using so
0:44
if you simply go to npmjs.com and just
0:47
search for this package which is
0:52
ngx ngx mat time picker this is actually
0:57
the
1:00
package that we are using right here uh
1:04
the command is very simple this is
1:05
actually the command and it's almost
1:07
having 177,000 weekly downloads so I
1:10
have written a step by-step blog post on
1:11
my website containing all this example
1:14
code so you can go to the description
1:16
link to follow along so now I will
1:19
simply delete everything and start from
1:21
scratch
1:31
so first of all you need to go to this
1:33
file here app. module. typescript file
1:36
and just register this module so first
1:39
of all we need to add this import
1:43
statement so just write here you just
1:46
need to add this import
1:49
statement and this package will be
1:52
coming from this package ngx Matt time
1:55
picker and essentially we are importing
1:58
this module here ngx Matt time picker
2:00
module and then you need to go to the
2:03
import s right here and just add this
2:06
module that you imported right here ngx
2:08
mat time picker
2:11
module. set local so it is essentially
2:14
setting the language to English language
2:16
and then you need to go to app.
2:18
component. typescript file this is
2:20
actually the file here and here you need
2:23
to set some options regarding your time
2:27
picker but before that we can embed this
2:29
time picker in this file app. component.
2:32
HTML so right in between these Matt form
2:36
field this is a material form field we
2:40
can
2:41
essentially write input type will be
2:47
text so on the right hand side you will
2:49
see the field will be there material
2:51
input and then we are attaching ngx M
2:55
time picker this is essentially this
2:58
attribute and and in the typescript code
3:02
we'll create this variable and we'll
3:05
then set a format here which is 24 hour
3:08
format and required will be required the
3:12
time is required and then it will only
3:15
be a readon
3:18
field and then lastly form control
3:21
attribute which will be equal to form
3:23
control items these are all the options
3:25
it supports one by one we are setting
3:28
all these options so now in this
3:30
typescript code we need to Define all
3:32
these options so we go to app.
3:34
component.ts file so right here
3:38
we Define
3:42
this form control here this is the
3:45
maximum time which is hour 16 and
3:48
minimum time hour is 14
3:51
so after this we just need to also show
3:54
a simple icon
4:00
so just after this material icon so that
4:03
as you click that icon the time picker
4:05
window will show so you attaching this
4:08
on clear
4:19
function and also this open from icon so
4:23
these are two icons showing right here
4:25
first one for closing the time picker
4:27
and secondly for showing the time picker
4:29
and
4:31
lastly after this we will have this
4:35
ngx Matt time picker so there is this
4:38
attribute here ngx Matt time
4:44
picker and this
4:48
actually here we need to give it an ID
4:51
here to the time picker so we are
4:53
attaching hash symbol time picker and
4:56
then there is a Boolean parameter enable
4:59
keyboard
5:01
input so if you also want to enable your
5:04
keyboard for selecting time you can
5:07
toggle this option so we have four
5:10
options right here first we are
5:11
attaching a unique ID to it then enable
5:14
keyboard input to True maximum time and
5:17
minimum time
5:18
so now we go to the typescript
5:23
code and we essentially write all the
5:26
call back
5:27
functions that we config good
5:47
so so after this I paste
5:50
it you will see this input field will
5:54
show and you will be able to select your
5:56
time from this this is the complete
5:59
example
6:01
you can even follow my blog post which
6:02
is given in the description link and all
6:05
the source code will be present it's
6:07
very simple first of all you go to this
6:09
file you import this module right here
6:13
then you add it inside the Imports array
6:15
and then you can directly use
6:17
it using this ngx mat time picker and
6:21
you pass these four
6:24
options maximum time and minimum time so
6:27
we are just configuring these options
6:29
right here in the typescript code this
6:31
is your maximum time minimum
6:35
time and we are targeting the time
6:38
Picker by its ID here because we given
6:40
this same ID if you check this is the
6:43
time picker ID that we given
6:47
so then we have using the open function
6:50
to actually open this time picker on
6:52
button click so as soon as I click the
6:54
icon the time picker will show so in
6:56
this way you can integrate this time
6:57
picker inside your angular ification and
7:00
thank you very much for watching this
7:01
video and also check out my website as
7:03
well uh free mediat tools.com uh which
7:06
contains thousands of tools regarding
7:09
audio video and image and I will be
7:11
seeing you guys in the next video
#Programming
#Software
#Time & Calendars