{"id":13728907,"url":"https://github.com/yannickebongue/ngx-material-time-select","last_synced_at":"2025-07-15T12:31:27.251Z","repository":{"id":54613931,"uuid":"168253664","full_name":"yannickebongue/ngx-material-time-select","owner":"yannickebongue","description":"The time select allows users to enter a time either through text input, or by choosing a time from the select panel","archived":false,"fork":false,"pushed_at":"2021-02-05T21:32:58.000Z","size":1493,"stargazers_count":3,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T19:40:28.046Z","etag":null,"topics":["angular","component","material","picker","select","time"],"latest_commit_sha":null,"homepage":"https://yannickebongue.github.io/ngx-material-time-select/","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/yannickebongue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-30T00:47:18.000Z","updated_at":"2022-12-06T09:49:13.000Z","dependencies_parsed_at":"2022-08-13T21:40:17.674Z","dependency_job_id":null,"html_url":"https://github.com/yannickebongue/ngx-material-time-select","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannickebongue%2Fngx-material-time-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannickebongue%2Fngx-material-time-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannickebongue%2Fngx-material-time-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannickebongue%2Fngx-material-time-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yannickebongue","download_url":"https://codeload.github.com/yannickebongue/ngx-material-time-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226038833,"owners_count":17564044,"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","component","material","picker","select","time"],"created_at":"2024-08-03T02:00:52.084Z","updated_at":"2024-11-23T12:00:44.552Z","avatar_url":"https://github.com/yannickebongue.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form"],"readme":"# Angular Material Time Select\n\n[![npm version](https://img.shields.io/npm/v/ngx-material-time-select.svg)](https://www.npmjs.org/package/ngx-material-time-select)\n[![build status](https://img.shields.io/travis/yannickebongue/ngx-material-time-select.svg)](https://travis-ci.org/yannickebongue/ngx-material-time-select)\n[![license](https://img.shields.io/github/license/yannickebongue/ngx-material-time-select.svg)](https://opensource.org/licenses/MIT)\n\n## Table of contents\n\n- [About](#about)\n- [Installation](#installation)\n- [Usage](#usage)\n- [License](#license)\n\n## About\n\nThe time select allows users to enter a time either through text input, or by choosing a time from\nthe select panel. It is made up of several components and directives that work together.\n\n\u003c!-- example(time-select-overview) --\u003e\n\n## Installation\n\n1. Checkout the Angular Material [Getting Started Guide](https://material.angular.io/guide/getting-started)\nif not installed.\n\n2. Install Angular Material Time Select. Also install Moment.js library if not done yet.\n\n```bash\nnpm install --save moment ngx-material-time-select\n```\n\n3. Import the time select module:\n\n```ts\n...\nimport {MatTimeSelectModule} from 'ngx-material-time-select';\n\n@NgModule({\n  ...\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    MatTimeSelectModule,\n    MatNativeTimeModule             // Or MatMomentTimeModule\n  ]\n  ...\n})\nexport class MyModule { }\n```\n\n4. Include a prebuilt theme in your `style.css`:\n\n```css\n@import \"~ngx-material-time-select/prebuilt-themes/indigo-pink.css\";\n```\n\n## Usage\n\n### Connecting a time select to an input\n\nA time-select is composed of a text input and a select panel pop-up, connected via the `matTimeSelect`\nproperty on the text input.\n\n```html\n\u003cinput [matTimeSelect]=\"myTimeSelect\"\u003e\n\u003cmat-time-select #myTimeSelect\u003e\u003c/mat-time-select\u003e\n```\n\nAn optional time select toggle button is available. A toggle can be added to the example above:\n\n```html\n\u003cinput [matTimeSelect]=\"myTimeSelect\"\u003e\n\u003cmat-time-select-toggle [for]=\"myTimeSelect\"\u003e\u003c/mat-time-select-toggle\u003e\n\u003cmat-time-select #myTimeSelect\u003e\u003c/mat-time-select\u003e\n```\n\nThis works exactly the same with an input that is part of an `\u003cmat-form-field\u003e` and the toggle\ncan easily be used as a prefix or suffix on the material input:\n\n```html\n\u003cmat-form-field\u003e\n  \u003cinput matInput [matTimeSelect]=\"myTimeSelect\"\u003e\n  \u003cmat-time-select-toggle matSuffix [for]=\"myTimeSelect\"\u003e\u003c/mat-time-select-toggle\u003e\n  \u003cmat-time-select #myTimeSelect\u003e\u003c/mat-time-select\u003e\n\u003c/mat-form-field\u003e\n```\n\nIf you want to customize the icon that is rendered inside the `mat-time-select-toggle`, you can do so\nby using the `matTimeSelectToggleIcon` directive:\n\n\u003c!-- example(time-select-custom-icon) --\u003e\n\n### Setting the selected time\n\nThe type of values that the time select expects depends on the type of `TimeAdapter` provided in your\napplication. When using the default `TimeAdapter`, the values will all be Moment.js instances.\n\nDepending on the `TimeAdapter` being used, the time select may automatically deserialize certain time\nformats for you as well. For example, the `TimeAdapter` allow\n[ISO 8601](https://tools.ietf.org/html/rfc3339) strings to be passed to the time select and\nautomatically converted to the proper object type. This can be convenient when binding data directly\nfrom your backend to the time select. However, the time select will not accept time strings formatted\nin user format such as `\"1:25 PM\"` as this is ambiguous and will mean different things depending on\nthe locale of the browser running the code.\n\nAs with other types of `\u003cinput\u003e`, the time select works with `@angular/forms` directives such as\n`formGroup`, `formControl`, `ngModel`, etc.\n\n\u003c!-- example(time-select-value) --\u003e\n\n### Changing the time select colors\n\nThe time select popup will automatically inherit the color palette (`primary`, `accent`, or `warn`)\nfrom the `mat-form-field` it is attached to. If you would like to specify a different palette for\nthe popup you can do so by setting the `color` property on `mat-time-select`.\n\n\u003c!-- example(time-select-color) --\u003e\n\n### Time validation\n\nThere are two properties that add time validation to the time select input. The `min` and `max`\nproperties.\n\n\u003c!-- example(time-select-min-max) --\u003e\n\nEach validation property has a different error that can be checked:\n * A value that violates the `min` property will have a `matTimeSelectMin` error.\n * A value that violates the `max` property will have a `matTimeSelectMax` error.\n\n### Input and change events\n\nThe input's native `(input)` and `(change)` events will only trigger due to user interaction with\nthe input element; they will not fire when the user selects a time from the select panel.\nTherefore, the time select input also has support for `(timeInput)` and `(timeChange)` events. These\ntrigger when the user interacts with either the input or the popup.\n\nThe `(timeInput)` event will fire whenever the value changes due to the user typing or selecting a\ntime from the select panel. The `(timeChange)` event will fire whenever the user finishes typing input\n(on `\u003cinput\u003e` blur), or when the user chooses a time from the select panel.\n\n\u003c!-- example(time-select-events) --\u003e\n\n### Disabling parts of the time select\n\nAs with any standard `\u003cinput\u003e`, it is possible to disable the time select input by adding the\n`disabled` property. By default, the `\u003cmat-time-select\u003e` and `\u003cmat-time-select-toggle\u003e` will inherit\ntheir disabled state from the `\u003cinput\u003e`, but this can be overridden by setting the `disabled`\nproperty on the time select or toggle elements. This can be useful if you want to disable text input\nbut allow selection via the select panel or vice-versa.\n\n\u003c!-- example(time-select-disabled) --\u003e\n\n### Manually opening and closing the select panel\n\nThe select panel can be programmatically controlled using the `open` and `close` methods on the\n`\u003cmat-time-select\u003e`. It also has an `opened` property that reflects the status of the popup.\n\n\u003c!-- example(time-select-api) --\u003e\n\n### Internationalization\n\nInternationalization of the time select is configured via three aspects:\n 1. The time locale.\n 2. The date implementation that the time select accepts.\n 3. The display and parse formats used by the time select.\n 4. The message strings used in the time select's UI.\n\n#### Setting the locale code\n\nThe time select use the same injection token of the Datepicker from `@angular/material`.\n[See documentation](https://material.angular.io/components/datepicker/overview#setting-the-locale-code).\n\nIt's also possible to set the locale at runtime using the `setLocale` method of the `TimeAdapter`.\n\n\u003c!-- example(time-select-locale) --\u003e\n\n#### Choosing a date implementation and date format settings\n\nThe time select was built to be date implementation agnostic. This means that it can be made to work\nwith a variety of different date implementations. However it also means that developers need to make\nsure to provide the appropriate pieces for the time select to work with their chosen implementation.\nThe easiest way to ensure this is just to import one of the pre-made modules:\n\n|Module               |Date type|Supported locales                                                      |Dependencies                      |Import from               |\n|---------------------|---------|-----------------------------------------------------------------------|----------------------------------|--------------------------|\n|`MatNativeTimeModule`|`Date`   |en-US                                                                  |None                              |`ngx-material-time-select`|\n|`MatMomentTimeModule`|`Moment` |[See project](https://github.com/moment/moment/tree/develop/src/locale)|[Moment.js](https://momentjs.com/)|`ngx-material-time-select`|\n\n*Please note: `MatNativeTimeModule` is based off of the functionality available in JavaScript's\nnative `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of\nthe native `Date` object is the inability to set the parse format. We highly recommend using the\n`MomentTimeAdapter` or a custom `TimeAdapter` that works with the formatting/parsing library of your\nchoice.*\n\nThese modules include providers for `TimeAdapter` and `MAT_TIME_FORMATS`\n\n```ts\n@NgModule({\n  imports: [MatTimeSelectModule, MatNativeTimeModule],\n})\nexport class MyApp {}\n```\n\nBecause `TimeAdapter` is a generic class, `MatTimeSelectComponent` and `MatTimeSelectInputDirective`\nalso need to be made generic. When working with these classes (for example as a `ViewChild`) you\nshould include the appropriate generic type that corresponds to the `TimeAdapter` implementation\nyou are using. For example:\n\n```ts\n@Component({...})\nexport class MyComponent {\n  @ViewChild(MatTimeSelectComponent) timeSelect: MatTimeSelectComponent\u003cDate\u003e;\n}\n```\n\n\u003c!-- example(time-select-moment) --\u003e\n\nIt is also possible to create your own `TimeAdapter` that works with any date format your app\nrequires. This is accomplished by subclassing `TimeAdapter` and providing your subclass as the\n`TimeAdapter` implementation. You will also want to make sure that the `MAT_TIME_FORMATS` provided\nin your app are formats that can be understood by your date implementation. See\n[_Customizing the parse and display formats_](#customizing-the-parse-and-display-formats)for more\ninformation about `MAT_TIME_FORMATS`.\n\n```ts\n@NgModule({\n  imports: [MatTimeSelectModule],\n  providers: [\n    {provide: TimeAdapter, useClass: MyTimeAdapter},\n    {provide: MAT_TIME_FORMATS, useValue: MY_DATE_FORMATS},\n  ],\n})\nexport class MyApp {}\n```\n\n#### Customizing the parse and display formats\n\nThe `MAT_TIME_FORMATS` object is just a collection of formats that the time select uses when parsing\nand displaying times. These formats are passed through to the `TimeAdapter` so you will want to make\nsure that the format objects you're using are compatible with the `TimeAdapter` used in your app.\n\n```ts\n@NgModule({\n  imports: [MatTimeSelectModule],\n  providers: [\n    {provide: MAT_TIME_FORMATS, useValue: MY_TIME_FORMATS},\n  ],\n})\nexport class MyApp {}\n```\n\n\u003c!-- example(time-select-formats) --\u003e\n\n#### Localizing labels and messages\n\nThe various text strings used by the time select are provided through `MatTimeSelectIntl`.\nLocalization of these messages can be done by providing a subclass with translated values in your\napplication root module.\n\n```ts\n@NgModule({\n  imports: [MatTimeSelectModule],\n  providers: [\n    {provide: MatTimeSelectIntl, useClass: MyIntl},\n  ],\n})\nexport class MyApp {}\n```\n\n### Accessibility\n\nThe `MatTimeSelectInput` and `MatTimeSelectToggle` directives add the `aria-haspopup` attribute to\nthe native input and toggle button elements respectively, and they trigger a select panel dialog with\n`role=\"dialog\"`.\n\n`MatTimeSelectIntl` includes strings that are used for `aria-label`s. The time select input\nshould have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or\n`MatTimeSelectIntl`.\n\n#### Keyboard shortcuts\n\nThe time select supports the following keyboard shortcuts:\n\n| Shortcut             | Action                                    |\n|----------------------|-------------------------------------------|\n| `ALT` + `DOWN_ARROW` | Open the select panel pop-up              |\n| `ESCAPE`             | Close the select panel pop-up             |\n\n### Troubleshooting\n\n#### Error: MatTimeSelectComponent: No provider found for TimeAdapter/MAT_TIME_FORMATS\n\nThis error is thrown if you have not provided all of the injectables the time select needs to work.\nThe easiest way to resolve this is to import the `MatNativeTimeModule` or `MatMomentTimeModule` in\nyour application's root module. See\n[_Choosing a date implementation_](#choosing-a-date-implementation-and-date-format-settings)) for\nmore information.\n\n#### Error: A MatTimeSelectComponent can only be associated with a single input\n\nThis error is thrown if more than one `\u003cinput\u003e` tries to claim ownership over the same\n`\u003cmat-time-select\u003e` (via the `matTimeSelect` attribute on the input). A time select can only be\nassociated with a single input.\n\n#### Error: Attempted to open a MatTimeSelectComponent with no associated input.\n\nThis error occurs if your `\u003cmat-time-select\u003e` is not associated with any `\u003cinput\u003e`. To associate an\ninput with your time select, create a template reference for the time select and assign it to the\n`matTimeSelect` attribute on the input:\n\n```html\n\u003cinput [matTimeSelect]=\"picker\"\u003e\n\u003cmat-time-select #picker\u003e\u003c/mat-time-select\u003e\n```\n\n## License\n\nCopyright (c) 2019 Yannick Ebongue\n\nReleased under the MIT License (see [LICENSE](LICENSE))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyannickebongue%2Fngx-material-time-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyannickebongue%2Fngx-material-time-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyannickebongue%2Fngx-material-time-select/lists"}