| \\n \\n | \\n \\n\\n \\n | \\n \\n | \\n \\n\\n \\n | \\n \\n \\n \\n | \\n \\n\\n \\n | \\n |
| \\n | \\n \\n: | \\n \\n\\n \\n | \\n \\n: | \\n \\n\\n \\n | \\n \\n\\n \\n | \\n \\n | \\n
| \\n \\n \\n \\n | \\n \\n\\n \\n | \\n \\n \\n \\n | \\n \\n\\n \\n | \\n \\n \\n \\n | \\n \\n\\n \\n | \\n |
Time is: {{myTime}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-basic',\r\n templateUrl: './basic.html'\r\n})\r\nexport class DemoTimepickerBasicComponent {\r\n mytime: Date = new Date();\r\n}\r\n","Time is: {{mytime}}\r\n","import { Component } from '@angular/core';\r\nimport { TimepickerConfig } from 'ngx-bootstrap/timepicker';\r\n\r\n// such override allows to keep some initial values\r\n\r\nexport function getTimepickerConfig(): TimepickerConfig {\r\n return Object.assign(new TimepickerConfig(), {\r\n hourStep: 2,\r\n minuteStep: 10,\r\n showMeridian: false,\r\n readonlyInput: false,\r\n mousewheel: true,\r\n showMinutes: true,\r\n showSeconds: false,\r\n labelHours: 'Hours',\r\n labelMinutes: 'Minutes',\r\n labelSeconds: 'Seconds'\r\n });\r\n}\r\n\r\n@Component({\r\n selector: 'demo-timepicker-config',\r\n templateUrl: './config.html',\r\n providers: [{ provide: TimepickerConfig, useFactory: getTimepickerConfig }]\r\n})\r\nexport class DemoTimepickerConfigComponent {\r\n mytime: string;\r\n}\r\n","Time is: {{mytime}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-custom-meridian',\r\n templateUrl: './custom-meridian.html'\r\n})\r\nexport class DemoTimepickerCustomMeridianComponent {\r\n mytime: Date = new Date();\r\n meridians = ['AM(Midnight to Noon)', 'PM(Noon to Midnight)'];\r\n}\r\n","Time is: {{mytime}}\r\n","import { Component } from '@angular/core';\r\nimport { AbstractControl, FormControl } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-custom-validation',\r\n templateUrl: './custom-validation.html'\r\n})\r\nexport class DemoTimepickerCustomValidationComponent {\r\n myTime: Date;\r\n\r\n ctrl = new FormControl('', (control: AbstractControl) => {\r\n const value = control.value;\r\n\r\n if (!value) {\r\n return null;\r\n }\r\n\r\n const hours = value.getHours();\r\n\r\n if (hours < 11 || hours > 12) {\r\n return { outOfRange: true };\r\n }\r\n\r\n return null;\r\n });\r\n}\r\n","Illustrates custom validation, you have to select time between 11:00 and 12:59
\r\n\r\n\r\n Time is: {{myTime}}\r\n\r\nTime is: {{mytime}}\r\n\r\nTime is: {{mytime}}\r\nInvalid time format\r\n\r\n\r\n\r\n","import { Component } from '@angular/core';\r\nimport { FormControl, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-form',\r\n templateUrl: './form.html'\r\n})\r\nexport class DemoTimepickerFormComponent {\r\n form = new FormGroup({\r\n myControl: new FormControl(new Date())\r\n });\r\n}\r\n","
Time is: {{ form.get('myControl').value }}\r\n\r\n Time is: {{myTime}}\r\n\r\nTime is: {{mytime}}\r\n\r\nTime is: {{myTime}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-mousewheel',\r\n templateUrl: './mousewheel.html'\r\n})\r\nexport class DemoTimepickerMousewheelComponent {\r\n allowMouseWheel = true;\r\n myTime = new Date();\r\n}\r\n","Time is: {{myTime}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-timepicker-placeholder',\r\n templateUrl: './placeholder.html'\r\n})\r\nexport class DemoTimepickerPlaceholderComponent {\r\n hoursPlaceholder = 'hh';\r\n minutesPlaceholder = 'mm';\r\n secondsPlaceholder = 'ss';\r\n}\r\n\r\n","Time is: {{myTime}}
showMinutes: {{showMin}}
showSeconds: {{showSec}}\r\n\r\n\r\n\r\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n\r\nimport { demoComponentContent } from './timepicker-section.list';\r\nimport { ContentSection } from '@app/shared/components/docs/models/content-section.model';\r\n\r\n@Component({\r\n selector: 'timepicker-section',\r\n templateUrl: './timepicker-section.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TimepickerSectionComponent {\r\n name = 'Timepicker';\r\n src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/timepicker';\r\n componentContent: ContentSection[] = demoComponentContent;\r\n}\r\n","A lightweight & configurable timepicker directive
\r\nThe easiest way to add the timepicker component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component timepicker\r\n
Text in meridian labels can be customized by using meridians input property
isValid event emits true if a value is a valid data.\r\n Enter an invalid data to see error
Time is: {{myTime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-arrowkeys',\\r\\n templateUrl: './arrowkeys.html'\\r\\n})\\r\\nexport class DemoTimepickerArrowkeysComponent {\\r\\n allowArrowKeys = true;\\r\\n myTime = new Date();\\r\\n}\\r\\n\";","export default \"Time is: {{mytime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-basic',\\r\\n templateUrl: './basic.html'\\r\\n})\\r\\nexport class DemoTimepickerBasicComponent {\\r\\n mytime: Date = new Date();\\r\\n}\\r\\n\";","export default \"Time is: {{mytime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\nimport { TimepickerConfig } from 'ngx-bootstrap/timepicker';\\r\\n\\r\\n// such override allows to keep some initial values\\r\\n\\r\\nexport function getTimepickerConfig(): TimepickerConfig {\\r\\n return Object.assign(new TimepickerConfig(), {\\r\\n hourStep: 2,\\r\\n minuteStep: 10,\\r\\n showMeridian: false,\\r\\n readonlyInput: false,\\r\\n mousewheel: true,\\r\\n showMinutes: true,\\r\\n showSeconds: false,\\r\\n labelHours: 'Hours',\\r\\n labelMinutes: 'Minutes',\\r\\n labelSeconds: 'Seconds'\\r\\n });\\r\\n}\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-config',\\r\\n templateUrl: './config.html',\\r\\n providers: [{ provide: TimepickerConfig, useFactory: getTimepickerConfig }]\\r\\n})\\r\\nexport class DemoTimepickerConfigComponent {\\r\\n mytime: string;\\r\\n}\\r\\n\";","export default \"Time is: {{mytime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-custom-meridian',\\r\\n templateUrl: './custom-meridian.html'\\r\\n})\\r\\nexport class DemoTimepickerCustomMeridianComponent {\\r\\n mytime: Date = new Date();\\r\\n meridians = ['AM(Midnight to Noon)', 'PM(Noon to Midnight)'];\\r\\n}\\r\\n\";","export default \"Illustrates custom validation, you have to select time between 11:00 and 12:59
\\r\\n\\r\\n\\r\\n Time is: {{myTime}}\\r\\n\\r\\nTime is: {{mytime}}\\r\\n\\r\\nTime is: {{mytime}}\\r\\nInvalid time format\\r\\n\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-dynamic',\\r\\n templateUrl: './dynamic.html'\\r\\n})\\r\\nexport class DemoTimepickerDynamicComponent {\\r\\n mytime: Date | undefined = new Date();\\r\\n isValid: boolean;\\r\\n\\r\\n update(): void {\\r\\n const time = new Date();\\r\\n time.setHours(14);\\r\\n time.setMinutes(0);\\r\\n\\r\\n this.mytime = time;\\r\\n }\\r\\n\\r\\n changed(): void {\\r\\n console.log(`Time changed to: ${this.mytime}`);\\r\\n }\\r\\n\\r\\n clear(): void {\\r\\n this.mytime = void 0;\\r\\n }\\r\\n}\\r\\n\";","export default \"
Time is: {{ form.get('myControl').value }}\\r\\n\\r\\n Time is: {{myTime}}\\r\\n\\r\\nTime is: {{mytime}}\\r\\n\\r\\nTime is: {{myTime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-min-max',\\r\\n templateUrl: './min-max.html'\\r\\n})\\r\\nexport class DemoTimepickerMinMaxComponent {\\r\\n myTime: Date = new Date();\\r\\n minTime: Date = new Date();\\r\\n maxTime: Date = new Date();\\r\\n\\r\\n constructor() {\\r\\n this.minTime.setHours(8);\\r\\n this.minTime.setMinutes(0);\\r\\n this.maxTime.setHours(23);\\r\\n this.maxTime.setMinutes(55);\\r\\n }\\r\\n}\\r\\n\";","export default \"Time is: {{myTime}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-mousewheel',\\r\\n templateUrl: './mousewheel.html'\\r\\n})\\r\\nexport class DemoTimepickerMousewheelComponent {\\r\\n allowMouseWheel = true;\\r\\n myTime = new Date();\\r\\n}\\r\\n\";","export default \"Time is: {{myTime}}
showMinutes: {{showMin}}
showSeconds: {{showSec}}\\r\\n\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-timepicker-seconds',\\r\\n templateUrl: './toggle-minutes-seconds.html'\\r\\n})\\r\\nexport class DemoTimepickerToggleMinutesSecondsComponent {\\r\\n myTime: Date = new Date();\\r\\n showMin: boolean = true;\\r\\n showSec: boolean = true;\\r\\n\\r\\n toggleMinutes(): void {\\r\\n this.showMin = !this.showMin;\\r\\n }\\r\\n\\r\\n toggleSeconds(): void {\\r\\n this.showSec = !this.showSec;\\r\\n }\\r\\n\\r\\n}\\r\\n\";","export default \"// RECOMMENDED\\r\\nimport { TimepickerModule } from 'ngx-bootstrap/timepicker';\\r\\n// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)\\r\\nimport { TimepickerModule } from 'ngx-bootstrap';\\r\\n\\r\\n@NgModule({\\r\\n imports: [TimepickerModule.forRoot(),...]\\r\\n})\\r\\nexport class AppModule(){}\\r\\n\";"],"names":[],"sourceRoot":"webpack:///"}