hub / github.com/Agranom/ngx-material-timepicker
github.com/Agranom/ngx-material-timepicker @v2.9.0
Chat with this repo
185 symbols
371 edges
61 files
2 documented · 1%
● updated 2y agov2.9.0 · 2018-11-24★ 33769 open issues
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
ngx-material-timepicker
Handy material design timepicker for Angular 6.0+
Demo
https://agranom.github.io/ngx-material-timepicker/
Getting started
Install timepicker through npm:
npm install --save ngx-material-timepicker
Next import the timepicker module into your apps module:
import {NgModule} from '@angular/core';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
@NgModule({
imports: [NgxMaterialTimepickerModule.forRoot()]
})
export class MyModule {}
Finally connect the timepicker to an input via a template property:
<input [ngxTimepicker]="picker">
<ngx-material-timepicker #picker></ngx-material-timepicker>
The timepicker opens once you click on the input
Documentation
API reference for Angular Material Timepicker
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
NgxTimepicker
Directive responsible for managing the timepicker popup and setting value to input
Selector: ngxTimepicker
Properties
| Name | Description |
|---|---|
| @Input() | |
| ngxTimepicker: NgxMaterialTimepickerComponent | The timepicker that this input is associated with. |
| @Input() | |
| disabled: boolean | Weather the timepicker popup should be disabled. |
| @Input() | |
| value: string | Set default time for timepicker. |
| @Input() | |
| format: number | 12 or 24 . 12h/24h view for hour selection clock . 12 (AM/PM) format by default. |
| @Input() | |
| min: string or Moment | Set min time for timepicker (11:15 pm or moment().hour(11).minute(15) ) |
| @Input() | |
| max: string or Moment | Set max time for timepicker (11:15 pm or moment().hour(11).minute(15) ) |
| @Input() | |
| disableClick: boolean | Set true to disable opening timepicker by clicking on the input |
NgxMaterialTimepickerComponent
Component responsible for visualisation the timepicker
Selector: ngx-material-timepicker
Properties
| Name | Description |
|---|---|
| @Input() | |
| cancelBtnTmpl: TemplateRef | Set if you want to change cancel button to your custom one. |
| @Input() | |
| confirmBtnTmpl: TemplateRef | Set if you want to change confirm button to your custom one. |
| @Input() | |
| ESC: boolean | Disable or enable closing timepicker by ESC. |
| @Input() | |
| 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 |
| @Input() | |
| minutesGap: number | To define a gap between minutes. Set 1 by default |
| @Output() | |
| timeSet: EventEmitter\<string> | Emits time when that was set. |
| @Output() | |
| closed: EventEmitter\<null> | Emits after timepicker was closed. |
NgxMaterialTimepickerToggleComponent
Component responsible for opening the timepicker.
Selector: ngx-material-timepicker-toggle
Properties
| Name | Description |
|---|---|
| @Input() | |
| for: NgxMaterialTimepickerComponent | Timepicker instance that the button will toggle |
| @Input() | |
| disabled: boolean | Whether the toggle button is disabled |
NgxMaterialTimepickerToggleIconDirective
Can be used to override the icon of a NgxMaterialTimepickerToggleComponent.
Selector: [ngxMaterialTimepickerToggleIcon]
Development
Prepare your environment
Install local dev dependencies: npm install while current directory is this repo.
Development server
Run npm start to start a development server on a port 4200.
Open http//:localhost:4200 on your browser.
Tests
Run npm test to run tests once or npm run test:watch to continually run tests.
License
MIT
Extension points exported contracts — how you extend this code
NodeModule (Interface)
(no doc)
src/typings.d.ts
DisabledTimeConfig (Interface)
(no doc)
src/app/material-timepicker/models/disabled-time-config.interface.ts
ClockFaceTime (Interface)
(no doc)
src/app/material-timepicker/models/clock-face-time.interface.ts
Core symbols most depended-on inside this repo
hour
called by 19
src/app/material-timepicker/services/ngx-material-timepicker.service.ts
isTimeAvailable
called by 16
src/app/material-timepicker/services/time-adapter.ts
convertTimeToMoment
called by 13
src/app/material-timepicker/services/time-adapter.ts
transform
called by 12
src/app/material-timepicker/pipes/time-formatter.pipe.ts
onKeyDown
called by 10
src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts
selectTime
called by 9
src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts
formatTime
called by 8
src/app/material-timepicker/services/time-adapter.ts
minute
called by 8
src/app/material-timepicker/services/ngx-material-timepicker.service.ts
Shape
Languages
TypeScript100%
Modules by API surface
src/app/material-timepicker/ngx-material-timepicker.component.ts22 symbols
src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts20 symbols
src/app/material-timepicker/directives/ngx-timepicker.directive.ts19 symbols
src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts12 symbols
src/app/material-timepicker/services/ngx-material-timepicker.service.ts11 symbols
src/app/material-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.ts7 symbols
src/app/material-timepicker/services/time-adapter.ts6 symbols
src/app/material-timepicker/components/timepicker-period/ngx-material-timepicker-period.component.ts6 symbols
src/app/material-timepicker/components/timepicker-hours-face/ngx-material-timepicker-hours-face.spec.ts6 symbols
src/app/material-timepicker/services/ngx-material-timepicker-event.service.ts5 symbols
src/app/material-timepicker/directives/autofocus.directive.ts5 symbols
src/app/material-timepicker/timepicker-time.namespace.ts4 symbols
For agents
$ claude mcp add ngx-material-timepicker \
-- python -m otcore.mcp_server <graph>