{"id":14520350,"url":"https://github.com/dhutaryan/ngx-mat-timepicker","last_synced_at":"2026-02-08T19:24:34.326Z","repository":{"id":65534147,"uuid":"493385028","full_name":"dhutaryan/ngx-mat-timepicker","owner":"dhutaryan","description":"Material timepicker based on material design","archived":false,"fork":false,"pushed_at":"2025-07-04T12:51:38.000Z","size":10806,"stargazers_count":80,"open_issues_count":7,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-04T14:13:40.397Z","etag":null,"topics":["angular","angular-components","mat-timepicker","material","material-design","material-timepicker","ngx-mat-timepicker","timepicker"],"latest_commit_sha":null,"homepage":"https://dhutaryan.github.io/ngx-mat-timepicker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhutaryan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-05-17T19:21:04.000Z","updated_at":"2025-07-04T12:50:04.000Z","dependencies_parsed_at":"2023-12-15T12:25:42.651Z","dependency_job_id":"ac43ec97-0931-419c-bf95-732cbd9f8039","html_url":"https://github.com/dhutaryan/ngx-mat-timepicker","commit_stats":null,"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"purl":"pkg:github/dhutaryan/ngx-mat-timepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhutaryan%2Fngx-mat-timepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhutaryan%2Fngx-mat-timepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhutaryan%2Fngx-mat-timepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhutaryan%2Fngx-mat-timepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhutaryan","download_url":"https://codeload.github.com/dhutaryan/ngx-mat-timepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhutaryan%2Fngx-mat-timepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273051400,"owners_count":25037069,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angular-components","mat-timepicker","material","material-design","material-timepicker","ngx-mat-timepicker","timepicker"],"created_at":"2024-09-04T04:01:38.761Z","updated_at":"2026-02-08T19:24:34.292Z","avatar_url":"https://github.com/dhutaryan.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Sep 02, 2024](/content/2024/09/02/README.md)","Dates"],"readme":"# ngx-mat-timepicker\n\n[![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)\n[![code factor](https://img.shields.io/codefactor/grade/github/dhutaryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40dhutaryan%2Fngx-mat-timepicker)\n\nThe timepicker module using Angular material.\n\n### Versions\n\n| mat-timepicker | Angular             |\n| -------------- | ------------------- |\n| 20.x.x         | \u003e=20.0.0            |\n| 19.x.x         | \u003e=19.0.0            |\n| 18.x.x         | \u003e=18.0.0            |\n| 17.x.x         | ^17.0.0             |\n| 16.x.x         | ^16.0.0             |\n| 15.x.x         | ^15.0.0             |\n| 14.x.x         | ^14.0.0             |\n| 13.x.x         | \u003e=13.0.0 \u0026\u0026 \u003c15.0.0 |\n| 12.x.x         | \u003e=12.0.0 \u0026\u0026 \u003c15.0.0 |\n\n## Documentation\n\nCheck out the [documentation](https://dhutaryan.github.io/ngx-mat-timepicker/).\n\n## Installation\n\nYou have to install the Angular Material and set it up. [Learn more about the setup](https://material.angular.io/guide/getting-started).\n\nInstall the library:\n\n```bash\n$ npm install --save @dhutaryan/ngx-mat-timepicker\n```\n\nor\n\n```bash\n$ yarn add @dhutaryan/ngx-mat-timepicker\n```\n\n## Getting started\n\nImport `MatTimepickerModule` to your project.\n\n```typescript\nimport { MatTimepickerModule } from \"@dhutaryan/ngx-mat-timepicker\";\n\n@NgModule({\n  imports: [\n    // ...\n    MatTimepickerModule,\n    // ...\n  ],\n})\nexport class MyModule {}\n```\n\n## Adapter\n\nAdd a timepicker adapter.\n\n```typescript\nimport { MatTimepickerModule, provideNativeDateTimeAdapter } from \"@dhutaryan/ngx-mat-timepicker\";\n\n@NgModule({\n  imports: [\n    // ...\n    MatTimepickerModule,\n    // ...\n  ],\n  providers: [provideNativeDateTimeAdapter()]\n})\nexport class MyModule {}\n```\n\nor create your own\n\n```typescript\nimport { MatTimepickerModule } from \"@dhutaryan/ngx-mat-timepicker\";\n\n@NgModule({\n  imports: [\n    // ...\n    MatTimepickerModule,\n    // ...\n  ],\n  providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],\n})\nexport class MyModule {}\n```\n\n## Theming\n\nThen you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).\n\n```scss\n@use \"@dhutaryan/ngx-mat-timepicker\" as mat-timepicker;\n\n// timepicker uses these component\n@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);\n@include mat.input-theme(theme.$ngx-mat-timepicker-theme);\n@include mat.button-theme(theme.$ngx-mat-timepicker-theme);\n@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);\n@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);\n@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);\n\n// timepicker theme\n@include mat-timepicker.timepicker-theme($theme);\n\n// if you want to support color attribute in M3 add compatibility mixin\n@include mat.color-variants-backwards-compatibility($my-theme)\n```\n\nYou can also use `mat.theme` mixin instead.\n\n## Usage\n\n```html\n\u003cmat-form-field\u003e\n  \u003cinput type=\"text\" matInput [matTimepicker]=\"timepicker\" /\u003e\n  \u003cmat-timepicker-toggle matSuffix [for]=\"timepicker\"\u003e\u003c/mat-timepicker-toggle\u003e\n  \u003cmat-timepicker #timepicker\u003e\u003c/mat-timepicker\u003e\n\u003c/mat-form-field\u003e\n```\n\n## Locale\n\nDefault locale is `en-US`. You can set your locale as:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { MAT_TIME_LOCALE } from \"@dhutaryan/ngx-mat-timepicker\";\n\n@NgModule({\n  imports: [\n    // ...\n  ],\n  providers: [{ provide: MAT_TIME_LOCALE, useValue: \"en-GB\" }],\n})\nexport class MyModule {}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhutaryan%2Fngx-mat-timepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhutaryan%2Fngx-mat-timepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhutaryan%2Fngx-mat-timepicker/lists"}