{"id":13728868,"url":"https://github.com/owsolutions/amazing-time-picker","last_synced_at":"2025-04-05T04:12:22.940Z","repository":{"id":27107617,"uuid":"112513783","full_name":"owsolutions/amazing-time-picker","owner":"owsolutions","description":"Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material","archived":false,"fork":false,"pushed_at":"2023-07-12T14:42:59.000Z","size":3990,"stargazers_count":137,"open_issues_count":74,"forks_count":76,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T04:36:07.124Z","etag":null,"topics":["angular","angular2","angular4","angular5","clock","dialog","ng-time","ng-timepicker","picker","timepicker","timepickerdialog","timer"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/owsolutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-29T18:43:03.000Z","updated_at":"2024-10-18T11:03:49.000Z","dependencies_parsed_at":"2024-06-18T14:18:55.198Z","dependency_job_id":null,"html_url":"https://github.com/owsolutions/amazing-time-picker","commit_stats":{"total_commits":113,"total_committers":11,"mean_commits":"10.272727272727273","dds":0.6814159292035398,"last_synced_commit":"f2ba0bb90b25bffac2945563f3b463d093612bdb"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owsolutions%2Famazing-time-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owsolutions%2Famazing-time-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owsolutions%2Famazing-time-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owsolutions%2Famazing-time-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/owsolutions","download_url":"https://codeload.github.com/owsolutions/amazing-time-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","angular5","clock","dialog","ng-time","ng-timepicker","picker","timepicker","timepickerdialog","timer"],"created_at":"2024-08-03T02:00:51.480Z","updated_at":"2025-04-05T04:12:22.920Z","avatar_url":"https://github.com/owsolutions.png","language":"HTML","funding_links":[],"categories":["UI Components"],"sub_categories":["Form"],"readme":"# Amazing Time Picker (Clock) ![Build Status](https://travis-ci.org/owsolutions/amazing-time-picker.svg?branch=master) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Docs and demo\n\nYou can read and learn amazing time picker and online demo here:\n\n[https://owsolutions.github.io/amazing-time-picker\n](https://owsolutions.github.io/amazing-time-picker)\n\nA 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**\n\n## Angular 6, 7 support since version 1.8.0\nAfter 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.\n\nIn case required ( which shouldn't! ), install version 1.6.* for Angular 2, 4, 5 but they won't receive update.\n\n\n## Live demo\n[https://pixelplux.com/product/amazing-time-picker](https://owsolutions.github.io/amazing-time-picker)\n\n## Install\nYou need to install this repository as dependency and import it to your `app.module.ts` in `imports` section.\n\n```\nnpm install amazing-time-picker --save\n```\n\nthen, open your `app.module.ts` or other module that you want to use timepicker among, and import and add it to the `imports` section:\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AmazingTimePickerModule // this line you need\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nThis helps your angular project to build and compile it and let you use it.\n\n## Using in component markup\nAfter you have installed this module, you can use it within your html templates and give the directive to the any \u003cinput\u003e tag. When user closes the dialog, it's gonna update the input value and will listen to input click event to open the dialog.\n\n```html\n\u003cinput atp-time-picker value=\"19:00\"/\u003e\n```\n\n## Opening component programmatically\nYou can also open a timepicker dialog programmatically. In order to open that, you need to import the service in your component:\n\n```\nimport { AmazingTimePickerService } from 'amazing-time-picker';\n```\n\nThen add it inside your `app.component.ts` or any other component that you want to use timepicker inside of that.\n\n```\nimport { Component } from '@angular/core';\nimport { AmazingTimePickerService } from 'amazing-time-picker'; // this line you need\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  \n  constructor( private atp: AmazingTimePickerService, // this line you need\n             ) { }\n\n  open() {\n    const amazingTimePicker = this.atp.open();\n    amazingTimePicker.afterClose().subscribe(time =\u003e {\n      console.log(time);\n    });\n  }\n}\n```\n\n\nOnline demo\n\n![Amazing Time Picker | TimePicker | Materialize time picker | AmazingTimepicker | ClockPicker](time-picker.jpg)\n\n[https://owsolutions.github.io/amazing-time-picker\n](https://owsolutions.github.io/amazing-time-picker)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowsolutions%2Famazing-time-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fowsolutions%2Famazing-time-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowsolutions%2Famazing-time-picker/lists"}