Getting Started with the Angular TimePicker Component
Aug 15, 2023
Getting Started with the Angular TimePicker Component
Learn how easily you can create and configure the Syncfusion Angular TimePicker using the Angular CLI tool and Syncfusion ej2-angular-calendars package. This video also explains how to configure a few of the control’s basic features like setting a specific time range, time format, and mask support. https://github.com/SyncfusionExamples …https://ej2.syncfusion.com/angular/do …https://ej2.syncfusion.com/angular/de …https://www.syncfusion.com/account/ma …https://www.syncfusion.com/products/c …https://www.syncfusion.com/angular-ui …https://ej2.syncfusion.com/angular/do …https://ej2.syncfusion.com/angular/de …https://www.syncfusion.com/downloads/ …https://www.npmjs.com/package/@syncfu …http://bit.ly/syncfusionyoutube http://bit.ly/syncfusionemail https://www.facebook.com/Syncfusion/ https://twitter.com/Syncfusion https://www.linkedin.com/company/sync …
Content
0 -> Hi everyone, welcome to this video
2.16 -> tutorial on how to create and configure
4.937 -> the syncfusion angular timepicker
7.463 -> using the angular CLI tool and
10.205 -> syncfusion EJ2 angular calendars package.
12.45 -> Angular time Picker is a lightweight
14.502 -> and mobile friendly component that
16.188 -> allows end users to select a time either
18.26 -> from a popup time list or by entering
20.32 -> the value directly in the text box.
22.606 -> It supports masked time
24.258 -> input, time formatting, and time range.
27.25 -> I will show you how to configure
28.678 -> a few of its basic features,
30.29 -> like setting a specific time range,
32.13 -> time format, and mask support.
34.73 -> Let me show you the application
37.418 -> creation process.
38.32 -> First, I create my app using
40.984 -> the angular CLI tool.
42.76 -> I use VS code as the editor and show
45.256 -> the output in the Chrome browser.
47.44 -> In the command prompt, I install
49.654 -> the CLI tool globally using the npm
52.537 -> install global angular CLI command.
54.76 -> Then I create a new angular project
56.825 -> using the ng new command and provide
59.151 -> the app name my Angular project.
64.97 -> I navigate to the desired location
67.034 -> and install the time picker package
69.35 -> using the ng add Syncfusion
71.35 -> EJ2 Angular calendars command.
75.91 -> Now I'll open the project in VS code.
79.37 -> To start using the time picker component,
81.53 -> navigate to the app module page and
84.414 -> import the TIMEPICKER module from the
87.279 -> syncfusion EJ2 angular calendars package.
89.86 -> Then register it in the imports
92.308 -> array of the NG module.
94.62 -> After that I import the material theme
97.084 -> styles to the stylesheet file to apply
100.017 -> styles to the timepicker component.
102.28 -> Next I need to register the
104.896 -> SYNCFUSION license key.
106.21 -> Open the main TypeScript file and
108.568 -> import the "register license" method
110.616 -> from the syncfusion EJ2 base package.
113.05 -> Using this method,
114.586 -> register the angular trial license.
117.15 -> From the 2022 volume one release,
119.43 -> the license key is mandatory for angular
121.649 -> projects to avoid license warning.
125.79 -> In the app component HTML file,
128.51 -> replace the default code snippets
130.73 -> with Angular time picker
132.506 -> using the ejs time picker tag.
134.69 -> Then assign the styles
136.59 -> for this wrapper element.
138.49 -> I will run this project
141.08 -> using the command ng serve.
143.67 -> As you can see,
144.706 -> the output displays the time picker
146.317 -> and I can select a time either
147.738 -> from a popup list or by entering the
149.675 -> value directly in the text box.
152.97 -> I can also show a short hint in
155.314 -> the input element of the time
157.492 -> picker when no value is selected.
159.77 -> I include the placeholder property
161.59 -> and assign the value "select a time".
166.59 -> See now the specified hint is
168.738 -> shown in the input element.
170.85 -> Next I will show you how to set
172.794 -> the time that the time picker
174.67 -> displays it on initial load.
176.33 -> A time can be specified
178.7 -> using the value property.
180.6 -> Within the app component class,
182.41 -> I declare the date value variable
184.846 -> of the date type and set a value.
187.86 -> I then assign this variable to the
189.841 -> value property of the time picker.
194.1 -> As you can see, the specified
196.65 -> time value is shown in the input.
199.57 -> Now let me show you how to restrict the
201.757 -> time selection within a specified range
203.667 -> by defining the min and Max properties.
208.22 -> Within the app component class, I declare
210.929 -> the min value variable of the date
213.481 -> type and set the value to 1:00 AM.
216.11 -> Similarly, I define another variable Max
218.942 -> value and set the Max time value to 5:00 AM.
223.04 -> Next I assign these values to the
225.301 -> corresponding min and Max properties.
230.28 -> Check now I can only select a
233.115 -> time between 1:00 AM and 5:00 AM.
235.71 -> Next, let's move on to the mask support.
239.13 -> You can use the builtin mask support in
241.57 -> the time picker to enter a valid time.
244.09 -> Open the App module page,
245.63 -> import and inject the masked date time service
248.724 -> module in the providers array of Ng module.
252.43 -> I add the enable mask property
254.122 -> and set its value to true.
258.14 -> As you can see, I can enter the
260.396 -> time based on the mask pattern.
262.37 -> The mask is formed based on the
264.939 -> default format of the current culture.
267.62 -> Finally, I'll show you how to format the
270.164 -> time value displayed on the time picker.
272.67 -> As you can see, the time is
274.686 -> displayed in the hour minute format
276.624 -> with the AM / PM indicator with the
279.033 -> time interval of 30 minutes.
280.87 -> By default time format is based on
283.096 -> the culture and provides an option
285.224 -> to customize the display format of
287.438 -> time value using the format property.
289.91 -> It accepts standard and custom time
292.682 -> format strings as specified in MSDN.
295.19 -> Here I set a custom time format hour
297.886 -> and minutes to the format property.
300.25 -> I then add the step property to change
302.354 -> the time interval and set its value to 60.
307.14 -> See in the time picker,
308.32 -> the time is displayed in the hours and
311.272 -> minutes format without the AM/PM indicator.
313.97 -> Also, the step interval is based on 24
317.442 -> hour format with 60 minute interval.
320.49 -> In this video, I have shown you how to
322.857 -> create and configure the syncfusion angular
325.222 -> time picker component using the angular
327.616 -> CLI and a few of its basic features.
329.96 -> You can download a working example
331.958 -> from the GitHub link in the
334.047 -> description for this video below.
335.78 -> You can also see if you're
337.448 -> eligible for our Community license,
339.04 -> which will get you a free
340.738 -> license key to use our products.
342.77 -> Thank you for watching this video.
345.34 -> If you found this video useful,
347.1 -> give it a like and subscribe to our channel.
Source: https://www.youtube.com/watch?v=3efj-8AIc3Y
