Timepicker

The Timepicker component is a form control for choosing a time of day. Use input[ngsTimepicker] inside one ngs-form-field, connect it to ngs-timepicker, and add ngs-timepicker-toggle as a suffix button when users should open the dropdown from an icon.

The NgStarter Angular Timepicker component lets you let users choose or type a time of day in a form field. Use input[ngsTimepicker] inside one ngs-form-field, connected to an ngs-timepicker instance, when a form needs a time of day: meeting time, event time, booking time, reminder time, deadline time, availability slot, report time filter, or schedule setting. It includes examples for Basic time picker, Integration with Datepicker, Customizing the toggle icon, and Timepicker with interval.

Basic time picker

Use a timepicker when a form needs a time of day such as a meeting time, reminder time, availability slot, deadline, or report filter.

Pick a time

Integration with Datepicker

Combine Datepicker and Timepicker as separate form controls when users need to choose both date and time.

Meeting date

Meeting time

Value:

Customizing the toggle icon

Customize the toggle icon when the default time icon does not match the surrounding form or product language.

Pick a time

Timepicker with interval

Set the interval when the dropdown should offer fixed steps such as every 15, 30, or 60 minutes.

Interval 60 min

Interval 15 min

Timepicker

Basic time picker

Integration with Datepicker

Customizing the toggle icon

Timepicker with interval

Build the surrounding workflow