10+ Angular 2 Time Picker Examples

10+ Angular 2 Time Picker Examples

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 it’s 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

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”.

View Example

2. NG2 Bootstrap Time Picker

ng2 Bootstrap timepicker
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.

View Example

3. Angular 2/4 Date Time Picker

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’).

View Example

4. Time Picker for Angular2

Time Picker for Angular2
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.

View Example ng2 Version

5. Angular 2 Date Pipe Example

Angular2 Date Pipe
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 (|).

View Example

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).

View Example

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.

View Example

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.

View Example

9. mydatepicker

Angular 2 Time Picker Examples

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.

View Example


So these are the 10+ Angular 2 Time Picker Examples.If you like this tutorial script then share it with your community. If you have any suggestion Feel free to comment below.If you want to learn more about PHP, CodeIgniter, AngularJS, LaraveljQuery  Web Development then daily visit PHPCodify. Sharing is Caring.

10+ Angular 2 Time Picker Examples

Read previous post:
10+ Angular 2 Animations and Effects Tutorials

10+ Angular 2 Animations and Effects Tutorials Here are some Angular 2 Animations and Effects Tutorials which can help you...