{"id":13808315,"url":"https://github.com/tonysamperi/ngx-mat-timepicker","last_synced_at":"2025-05-14T02:31:39.663Z","repository":{"id":37456192,"uuid":"297707214","full_name":"tonysamperi/ngx-mat-timepicker","owner":"tonysamperi","description":"A true material timepicker","archived":false,"fork":false,"pushed_at":"2024-07-14T20:56:08.000Z","size":10185,"stargazers_count":114,"open_issues_count":3,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-09T08:43:09.966Z","etag":null,"topics":["android-timepicker","angular","angular-components","angular17","material","material-design","material-timepicker","ngx-mat-timepicker","picker","time","timepicker","timepicker-popup"],"latest_commit_sha":null,"homepage":"https://tonysamperi.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/tonysamperi.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}},"created_at":"2020-09-22T16:25:23.000Z","updated_at":"2024-10-07T16:57:46.000Z","dependencies_parsed_at":"2024-01-27T21:27:10.789Z","dependency_job_id":"9e528a32-6deb-4ee5-872a-f194be771027","html_url":"https://github.com/tonysamperi/ngx-mat-timepicker","commit_stats":{"total_commits":155,"total_committers":4,"mean_commits":38.75,"dds":"0.41290322580645167","last_synced_commit":"0ef12d8af4cd032b8523c54cc7f21c395a5111c1"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-mat-timepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-mat-timepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-mat-timepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-mat-timepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tonysamperi","download_url":"https://codeload.github.com/tonysamperi/ngx-mat-timepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273229,"owners_count":17448072,"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":["android-timepicker","angular","angular-components","angular17","material","material-design","material-timepicker","ngx-mat-timepicker","picker","time","timepicker","timepicker-popup"],"created_at":"2024-08-04T01:01:39.878Z","updated_at":"2025-05-14T02:31:39.632Z","avatar_url":"https://github.com/tonysamperi.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"readme":"# ngx-mat-timepicker\n\n[![npm][badge-npm-version]][url-npm] [![npm][badge-npm-downloads]][url-npm] [![MIT licensed][badge-licence]][url-licence] [![Build state][badge-ci-state]][url-ci-state] [![Size][badge-bundle]][url-bundle]\n\nA simple time picker module using Angular Material: it provides an Android style dialog for time selection and a handy\ninput for time selection in Material style.\n\n## VERY IMPORTANT READ THIS\n\nI'm moving this to the top because it appears that people don't get to reading it in the **contribute** section.  \nFOR THIS LIBRARY **PLEASE USE ISSUES ONLY FOR BUG REPORTING**. DON'T OPEN ISSUES SUCH AS \"I need upgrade for Angular\n1745646456\" especially if Angular 1745646456 was released a few days ago.  \nI **guarantee** that I manage the updates **AS SOON AS POSSIBLE**. But as you understand this is not a paying job, so\nyou can't get Angular 1745646456 the day it gets released.  \n**ISSUES NOT RESPECTING THIS WILL BE DELETED IMMEDIATELY WITHOUT ANY RESPONSE**.  \nThank you.\n\n### Why this project?\n\nThe original was nice, but for some reason it didn't adapt to your Material theme.  \nSo an extra config was necessary to have a nice integration in your app.  \nThis project **automatically adapts** to your Material theme, even if a custom one (so, for example, if you have a dark\ntheme, you'll have a dark dialog!).  \nBy default it will use the primary color.  \nYou can choose the color scheme among the three **ThemePalette** items, natively provided by\nMaterial: `primary`, `accent`, `warn`.\n\nAlso a few components were unnecessary and not in material style, so I got rid of them and integrated Material\ncomponents, such as `mat-select` and others.\n\n**Other general improvements**\n\n* Improved clock hand alignments\n* Changed clock hand appearance for minutes which aren't multiple of 5 (as in Android timepicker)\n* Improved appearance of focused inputs, the toggle and increase/decrease arrows in timepicker-field\n* Improved header content disposition when 24h format is enabled\n* Used material buttons for dialog actions (CANCEL/OK)\n* Added leading zero for the hours in the dialog header (as in Android timepicker)\n* More consistent naming\n* Removed useless exports from NgxMatTimepickerModule\n\n### Compatibility\n\n* v9 \u003c Angular/Material \u003c v17\n\n**IMPORTANT**  \nRemember to include a Material Theme in your project, example:\n\n```scss  \n@use \"@angular/material/prebuilt-themes/indigo-pink.css\";  \n```  \n\nor\n\n```scss  \n@use \"@angular/material\" as mat;\n\n@include mat.all-component-themes($my-theme);  \n```  \n\n**IMPORTANT ABOUT MATERIAL V15**\nThis library uses the new set of Material components, so it doesn't support the **legacy** theming.\nSupport for legacy components has been considered, but won't be developed.\nIf you still need the legacy version you can contact me and we'll see what can be done, but a real effort will be put\nthrough only for a huge amount of requests.\n\nRefer to the [Angular Material](https://material.angular.io) website for theming options.\n\n## Table of contents\n\n* [Getting started](#getting-started)\n* [Internationalization](#internationalization)\n* [Documentation](#documentation)\n    * [NgxMatTimepicker](#ngxMatTimepicker)\n    * [NgxMatTimepickerComponent](#ngxMatTimepickercomponent)\n    * [NgxMatTimepickerFieldComponent](#ngxMatTimepickerfieldcomponent)\n    * [NgxMatTimepickerToggleComponent](#ngxMatTimepickertogglecomponent)\n    * [NgxMatTimepickerToggleIconDirective](#ngxMatTimepickertoggleicondirective)\n* [Development](#development)\n* [Tests](#tests)\n* [License](#license)\n\n## Getting started\n\nInstall timepicker through npm:\n\n```bash  \nnpm i --save ngx-mat-timepicker\n```  \n\nNext import the timepicker module into your app's module:\n\n```typescript  \nimport {NgModule} from '@angular/core';\nimport {NgxMatTimepickerModule} from 'ngx-mat-timepicker';\n\n@NgModule({\n    imports: [NgxMatTimepickerModule]\n})\nexport class MyModule {\n}  \n```  \n\nFinally connect the timepicker to an input via a template property:\n\n```html  \n\u003cinput [ngxMatTimepicker]=\"picker\"\u003e\n\u003cngx-mat-timepicker #picker\u003e\u003c/ngx-mat-timepicker\u003e  \n```  \n\nThe timepicker opens once you click on the input\n\n## Internationalization\n\nTimepicker supports locales in format `BCP 47`. It has `en-US` locale by default.\n\nTo override default locale:\n\n```typescript  \nimport {NgModule} from '@angular/core';\nimport {NgxMatTimepickerModule} from 'ngx-mat-timepicker';\n\n@NgModule({\n    imports: [NgxMatTimepickerModule.setLocale('en-GB')]\n})\nexport class MyModule {\n}  \n```  \n\n## Documentation\n\n#### API reference for Angular Material Timepicker\n\n```typescript  \nimport {NgxMatTimepickerModule} from 'ngx-mat-timepicker';  \n```  \n\n#### NgxMatTimepicker\n\nDirective responsible for managing the timepicker popup and setting value to input\n\nSelector: `ngxMatTimepicker`\n\n**Properties**\n\n| Name               | Type                      | Description                                                                                                                                                         |  \n|--------------------|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|  \n|                    |                           |                                                                                                                                                                     |\n| ngxMatTimepicker   | NgxMatTimepickerComponent | The timepicker that this input is associated with.                                                                                                                  |  \n| color              | ThemePalette              | The material palette to use.                                                                                                                                        | \n| disabled           | boolean                   | Weather the timepicker popup should be disabled.                                                                                                                    |  \n| value              | string                    | Set a default value and time for a timepicker. The format of the time is in 12 hours notation `11:00 PM` or in 24 hours notation `23:00`. A Date string won't work. |  \n| format             | number                    | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default.                                                                              |  \n| min                | string \\| DateTime        | Set min time for timepicker (`11:15 pm` )                                                                                                                           |  \n| max                | string \\| DateTime        | Set max time for timepicker (`11:15 pm` )                                                                                                                           |  \n| disableClick       | boolean                   | Set `true` to disable opening timepicker by clicking on the input                                                                                                   |  \n| dottedMinutesInGap | boolean                   | Set `true` (or just have the attr, since it's coherced) to have dots where minutes are not printed                                                                  |  \n\n#### NgxMatTimepickerLocaleService (⭐NEW FROM v 13.2.0!!!⭐)\n\nThis service allows to **change the locale anytime**.  \nYou can inject this in your component or extend and provide your version, in order to provide your current locale to all\nthe pickers!  \nAt this time is **semi-static**, which means you can't change the locale for pickers that are already opened.  \nBut **new pickers will always get the updated locale**.\n\n#### NgxMatTimepickerComponent\n\nComponent responsible for visualisation the timepicker\n\nSelector: `ngx-mat-timepicker`\n\n**Properties**\n\n| Name                | Type                   | Description                                                                                                                                |  \n|---------------------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|  \n| cancelBtnTmpl       | TemplateRef\u003cNode\u003e      | Set if you want to change cancel button to your custom one.                                                                                | | @Input()  \n| confirmBtnTmpl      | TemplateRef\u003cNode\u003e      | Set if you want to change confirm button to your custom one.                                                                               |  \n| defaultTime         | string                 | Set default time for a timepicker. `12:00 AM` by default                                                                                   |  \n| disableAnimation    | boolean                | Set `true` to prevent opening and closing timepicker animation. Uses `false` by default                                                    |  \n| editableHintTmpl    | TemplateRef\u003cNode\u003e      | Set if you want to change dial hint to your custom one. Works only if `enableKeyboardInput = true`                                         |  \n| enableKeyboardInput | boolean                | To disable or enable changing time through a keyboard on the timepicker dial without interaction with a clock face. Set `false` by default |  \n| hoursOnly           | boolean                | Set `true` to prevent switching to minutes automatically once hour is selected. Uses `false` by default                                    |  \n| isEsc               | boolean                | Disable or enable closing timepicker by ESC.                                                                                               |  \n| minutesGap          | number                 | To define a gap between minutes. Set `1` by default                                                                                        |  \n| preventOverlayClick | boolean                | Set `true` to prevent closing the timepicker by overlay click. Uses `false` by default                                                     |  \n| timepickerClass     | string                 | To provide a custom css class for the timepicker                                                                                           |  \n| timeSet:            | EventEmitter\\\u003cstring\\\u003e | Emits time when that was set.                                                                                                              |  \n| opened:             | EventEmitter\\\u003cnull\\\u003e   | Emits after timepicker was opened.                                                                                                         |  \n| closed              | EventEmitter\\\u003cnull\\\u003e   | Emits after timepicker was closed.                                                                                                         |  \n| hourSelected        | EventEmitter\\\u003cnumber\\\u003e | Emits after hour was selected.                                                                                                             |  \n| timeChanged         | EventEmitter\\\u003cstring\\\u003e | Emits once time was changed.                                                                                                               |  \n\n#### NgxMatTimepickerFieldComponent\n\nThe timepicker as a control.\n\nSelector: `ngx-mat-timepicker-field`\n\n**Properties**\n\n| Name           | Type                             | Description                                                                 |  \n|----------------|----------------------------------|-----------------------------------------------------------------------------|  \n| disabled:      | boolean                          | Whether the timepicker is disabled                                          |  \n| floatLabel     | 'never' \\| 'always' \\| 'auto'    | Whether the labels of the fields should float, default to never             | \n| toggleIcon     | TemplateRef\\\u003cHTMLObjectElement\\\u003e | Provide custom `svg` icon for toggle button                                 |  \n| buttonAlign    | 'right' \\| 'left'                | Positioning toggle button (`right` by default)                              |  \n| clockTheme     | NgxMatTimepickerTheme            | Custom css properties which will override timepicker clock                  |  \n| controlOnly    | boolean                          | Hide or display toggle button with the timepicker clock                     |  \n| format         | number                           | `12` or `24` . Set format for timepicker. `12` (AM/PM) format by default.   |  \n| cancelBtnTmpl  | TemplateRef\\\u003cNode\\\u003e              | Set if you want to change cancel button for timepicker to your custom one.  |\n| confirmBtnTmpl | TemplateRef\\\u003cNode\\\u003e              | Set if you want to change confirm button for timepicker to your custom one. |  \n| min            | string \\| DateTime               | Set min time for timepicker (`11:15 pm` )                                   |  \n| max            | string \\| DateTime               | Set max time for timepicker (`11:15 pm` )                                   |  \n| timeChanged    | EventEmitter\\\u003cstring\\\u003e           | Emit a new time once it is changed.                                         |  \n\n#### NgxMatTimepickerToggleComponent\n\nComponent responsible for opening the timepicker.\n\nSelector: `ngx-mat-timepicker-toggle`\n\n**Properties**\n\n| Name     | Type                      | Description                                     |  \n|----------|---------------------------|-------------------------------------------------|  \n| for      | NgxMatTimepickerComponent | Timepicker instance that the button will toggle |  \n| disabled | boolean                   | Whether the toggle button is disabled           |  \n\n#### NgxMatTimepickerToggleIconDirective\n\nCan be used to override the icon of a `NgxMatTimepickerToggleComponent`.\n\nSelector: `[ngxMatTimepickerToggleIcon]`\n\n**Properties**\n\n| Name                  | Type                  | Description                                            |  \n|-----------------------|-----------------------|--------------------------------------------------------|  \n| ngxMatTimepickerTheme | NgxMatTimepickerTheme | Custom css properties which will override the defaults |   \n\n### Demo\n\n\u003ca href=\"https://tonysamperi.github.io/ngx-mat-timepicker/\"\u003eDemo\u003c/a\u003e\n\n```terminal  \n $ npm install $ npm run start  //run example\n```  \n\nRun `npm test` to run tests once or `npm run test:watch` to continually run tests.\n\n## Special thanks\n\nJetbrains is now supporting this library with an open-source license, which will allow a better code! 🎉\n\n![jetbrains-logo](https://user-images.githubusercontent.com/5957244/150580991-863d6fba-1090-4924-b26c-be19c6310f24.svg)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n\n### Thanks to\n\n[LayZeeDK](https://github.com/LayZeeDK) - For his great work on the unit tests and upgrades for v15 \"legacy\"\n\n[Agranom](https://github.com/Agranom) for setting up the original repo.\n\n[badge-bundle]: https://img.shields.io/bundlephobia/minzip/ngx-mat-timepicker\n\n[badge-ci-state]: https://github.com/tonysamperi/ngx-mat-timepicker/actions/workflows/main.yml/badge.svg\n\n[badge-licence]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n\n[badge-npm-downloads]: https://img.shields.io/npm/dm/ngx-mat-timepicker.svg?style=flat-square\n\n[badge-npm-version]: https://img.shields.io/npm/v/ngx-mat-timepicker.svg?style=flat-square\n\n[badge-openbase]: https://badges.openbase.com/js/rating/ngx-mat-timepicker.svg?token=imNtfVxrKTW3J1VSOlxCqRcyvTG7POhNoOkaljG1DeA=\n\n[initial-author]: https://github.com/TonySamperi\n\n[url-bundle]: https://img.shields.io/bundlephobia/minzip/ngx-mat-timepicker\n\n[url-ci-state]: https://github.com/tonysamperi/ngx-mat-timepicker/actions\n\n[url-licence]: https://github.com/tonysamperi/ngx-mat-timepicker/blob/master/LICENSE\n\n[url-npm]: https://www.npmjs.com/package/ngx-mat-timepicker\n\n[url-openbase]: https://openbase.com/js/ngx-mat-timepicker\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-mat-timepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonysamperi%2Fngx-mat-timepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-mat-timepicker/lists"}