With angular’s class declaration syntax (ngmodel) it allows you to easily specify the options selectively for integrating a time picker component into your angular2 application. Depending on the version of Angular your using will determine what time components are available in packages as you know there are heaps available for jQuery and not so much here but its definitely growing. Here are some Angular 2 Time Picker Examples that might help you find the one your looking for quickly.
1. NG2 UI Datetime Picker
Datetime picker converts input field into datetime selector by simply adding “ngui-datetime-picker” as an attribute. ngui is a collection of quality Angular2 directives. To make ngui available to your project, you need to install a npm package “@ngui/ngui”.
2. NG2 Bootstrap Time Picker
Create tag with the special code inside, like it’s shown below, to use 12 or 24 hours time picker. You can declare the following options for your time-picker: twelvehour: Boolean, darktheme: Boolean, label: String, placeholder: String, and showClock: Boolean.
3. Angular 2/4 Date Time Picker
AngularJs DateTimePicker is a cool responsive DateTimePicker directive for Web and Mobile. It is Mobile friendly and light weight. This Picker is responsive and works on all devices(desktops, tablets and mobiles). This Picker combines both date picker and time picker. You could toggle between them on the show-up picker. This Picker has two modes(‘popup’ and ‘dropdown’).
4. Time Picker for Angular2
jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.7kb minified and gzipped. Use this plugin to unobtrusively add a timepicker dropdown to your forms. It’s lightweight (2.7kb minified and gzipped) and easy to customize.
5. Angular 2 Date Pipe Example
Angular 2 DatePipe provides different date formats that can be predefined date formats as well as custom date formats. DatePipe relates to CommonModule. The date input can be given as date object, milliseconds or an ISO date string. DatePipe is a Pipe API that works using pipe operator (|).
6. angular2-material-datepicker
The datepicker component can be called with no arguments. If you use an event emitter, the datepicker component has an emitter called onSelect (when the date is picked), and dateChange (for two-way binding).
7. angular-io-datepicker
Customizable DatePicker component for Angular 2. You’ll need to add DatePickerModule and OverlayModule to your application module. There is has to be FormsModule. If you use Model-Driven Form you’ll need to add ReactiveFormModule too.
8. ng2-datepicker-bootstrap
A very simple datepicker for Angular. You should use the version 2.x.x for Angular 2.x.x applications and the version 4.x.x for Angular 4.x.x applications. This component is ready to AoC (Ahead-of-Time) compilation. Below the operating instructions.
9. mydatepicker
Attribute directive date picker. You have full control to the input box and the buttons of the input box. Otherwise this is similar as mydatepicker. The date picker below has bootstrap 3.3.7 styled input box with glyphicons.