All Projects → owsolutions → Amazing Time Picker

owsolutions / Amazing Time Picker

Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material

Projects that are alternatives of or similar to Amazing Time Picker

Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+80.28%)
Mutual labels:  dialog, angular2, angular4, angular5
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (+19.01%)
Mutual labels:  picker, angular2, angular4, angular5
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+626.06%)
Mutual labels:  angular2, angular4, angular5
Drip Ionic3
「水滴打卡」App Open Source Code Base On Ionic V3 Framework
Stars: ✭ 74 (-47.89%)
Mutual labels:  angular2, angular4, angular5
Ng Simple Slideshow
A simple, responsive slideshow for Angular 4+.
Stars: ✭ 119 (-16.2%)
Mutual labels:  angular2, angular4, angular5
Angular Prest
pREST component for Angular
Stars: ✭ 16 (-88.73%)
Mutual labels:  angular2, angular4, angular5
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+5088.73%)
Mutual labels:  angular2, angular4, angular5
Fusebox Angular Universal Starter
Angular Universal seed project featuring Server-Side Rendering, @fuse-box bundling, material, firebase, Jest, Nightmare, and more
Stars: ✭ 132 (-7.04%)
Mutual labels:  angular2, angular4, angular5
Angular2 Mdl
Angular 2, 4, 5, 6, 7, 8, 9, 10, 11 components, directives and styles based on material design lite (npm: @angular-mdl/core)
Stars: ✭ 562 (+295.77%)
Mutual labels:  angular2, angular4, angular5
Ng2 Flatpickr
Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)
Stars: ✭ 91 (-35.92%)
Mutual labels:  angular2, angular4, angular5
Springbootangularhtml5
♨️ Spring Boot 2 + Angular 11 + HTML5 router mode + HTTP interceptor + Lazy loaded modules
Stars: ✭ 89 (-37.32%)
Mutual labels:  angular2, angular4, angular5
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-35.21%)
Mutual labels:  angular2, angular4, angular5
Ngx Permissions
Permission and roles based access control for your angular(angular 2,4,5,6,7,9+) applications(AOT, lazy modules compatible
Stars: ✭ 749 (+427.46%)
Mutual labels:  angular2, angular4, angular5
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+397.89%)
Mutual labels:  dialog, picker, timepicker
Angulartics2
Vendor-agnostic analytics for Angular2 applications.
Stars: ✭ 963 (+578.17%)
Mutual labels:  angular2, angular4, angular5
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+390.14%)
Mutual labels:  angular2, angular4, angular5
Angular2
Angular 2 Seed
Stars: ✭ 75 (-47.18%)
Mutual labels:  angular2, angular4, angular5
Aspnetcore Angular Universal
ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
Stars: ✭ 1,455 (+924.65%)
Mutual labels:  angular2, angular4, angular5
Ngx Monaco Editor
Monaco Editor component for Angular 2 and Above
Stars: ✭ 347 (+144.37%)
Mutual labels:  angular2, angular4, angular5
Angular Material App
基于最新Angular 9框架与Material 2技术的web中后台前端应用框架。
Stars: ✭ 509 (+258.45%)
Mutual labels:  angular2, angular4, angular5

Amazing Time Picker (Clock) Build Status License: MIT

Docs and demo

You can read and learn amazing time picker and online demo here:

https://pixelplux.com/product/amazing-time-picker

A visual time picker for angular 2+ projects. You can use this timepicker with Angular 2, 4, 5, 6, 7 and Angular Material. This project doesn't require angular material or any other dependencies

Angular 6, 7 support since version 1.8.0

After some delay we have now support for Angular 6+. Also you can install latest version on Angular 2 project as well and it's fully backward compatible.

In case required ( which shouldn't! ), install version 1.6.* for Angular 2, 4, 5 but they won't receive update.

Live demo

https://pixelplux.com/product/amazing-time-picker

Install

You need to install this repository as dependency and import it to your app.module.ts in imports section.

npm install amazing-time-picker --save

then, open your app.module.ts or other module that you want to use timepicker among, and import and add it to the imports section:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AmazingTimePickerModule // this line you need
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This helps your angular project to build and compile it and let you use it.

Using in component markup

After you have installed this module, you can use it within your html templates and give the directive to the any tag. When user closes the dialog, it's gonna update the input value and will listen to input click event to open the dialog.

<input atp-time-picker value="19:00"/>

Opening component programmatically

You can also open a timepicker dialog programmatically. In order to open that, you need to import the service in your component:

import { AmazingTimePickerService } from 'amazing-time-picker';

Then add it inside your app.component.ts or any other component that you want to use timepicker inside of that.

import { Component } from '@angular/core';
import { AmazingTimePickerService } from 'amazing-time-picker'; // this line you need

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor( private atp: AmazingTimePickerService, // this line you need
             ) { }

  open() {
    const amazingTimePicker = this.atp.open();
    amazingTimePicker.afterClose().subscribe(time => {
      console.log(time);
    });
  }
}

Online demo

Amazing Time Picker | TimePicker | Materialize time picker | AmazingTimepicker | ClockPicker

https://pixelplux.com/product/amazing-time-picker

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].