### File

`src/timepicker/timepicker.component.ts`

### Description

See demo

../../iframe.html?id=time-picker--simple

### Implements

`ControlValueAccessor`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true }`
selector | `ibm-timepicker`
template |
    <div class="bx--time-picker__input">
    	<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    		<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    		<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    	</label>
    	<input
    		[ngClass]="{
    			'bx--text-input--light': theme === 'light',
    			'bx--skeleton': skeleton
    		}"
    		[value]="value"
    		[placeholder]="placeholder"
    		[pattern]="pattern"
    		[attr.id]="id"
    		[disabled]="disabled"
    		maxlength="5"
    		(change)="onChange($event)"
    		type="text"
    		class="bx--time-picker__input-field bx--text-input">
    </div>
    <ng-content></ng-content>

### Index

###### Properties
Protected onChangeHandler Protected onTouchedHandler Static timePickerCount
###### Methods
Public isTemplate onChange registerOnChange registerOnTouched setDisabledState writeValue
###### Inputs
disabled id label pattern placeholder skeleton theme value
###### Outputs
valueChange
###### HostBindings
class.bx--time-picker
###### HostListeners
blur

### Inputs

`disabled` | Default value : `false`
Defined in src/timepicker/timepicker.component.ts:62

`id` | Default value : ``timepicker-${TimePicker.timePickerCount++}``
Defined in src/timepicker/timepicker.component.ts:61

`label` | Type : `string | TemplateRef<any>`
Defined in src/timepicker/timepicker.component.ts:58

`pattern` | Default value : `"(1[012]|[0-9]):[0-5][0-9]"`
Defined in src/timepicker/timepicker.component.ts:60

`placeholder` | Default value : `"hh:mm"`
Defined in src/timepicker/timepicker.component.ts:59

`skeleton` | Set to true for a loading select. Default value : `false`
Defined in src/timepicker/timepicker.component.ts:68

`theme` | `light` or `dark` select theme Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/timepicker/timepicker.component.ts:73

`value` | Type : `string`
Defined in src/timepicker/timepicker.component.ts:63

### Outputs

`valueChange` | `$event` Type: `EventEmitter<string>`
Defined in src/timepicker/timepicker.component.ts:75

### HostBindings

class.bx--time-picker
`class.bx--time-picker: ```
Default value : `true`
Defined in src/timepicker/timepicker.component.ts:56

### HostListeners

blur
`blur()`
Defined in src/timepicker/timepicker.component.ts:99

### Methods

Public isTemplate
`isTemplate(value)`
Defined in src/timepicker/timepicker.component.ts:103
Parameters :
Name | Optional
value | No
Returns : `boolean`

onChange
`onChange(event)`
Defined in src/timepicker/timepicker.component.ts:93
Parameters :
Name | Optional
event | No
Returns : `void`

registerOnChange
`registerOnChange(callback: any)`
Defined in src/timepicker/timepicker.component.ts:81
Parameters :
Name | Type | Optional
callback | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(callback: any)`
Defined in src/timepicker/timepicker.component.ts:85
Parameters :
Name | Type | Optional
callback | `any` | No
Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`
Defined in src/timepicker/timepicker.component.ts:89
Parameters :
Name | Type | Optional
isDisabled | `boolean` | No
Returns : `void`

writeValue
`writeValue(value: string)`
Defined in src/timepicker/timepicker.component.ts:77
Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

### Properties

Protected onChangeHandler
`onChangeHandler: ```
Default value : `(_: any) => { }`
Defined in src/timepicker/timepicker.component.ts:107

Protected onTouchedHandler
`onTouchedHandler: ```
Default value : `() => { }`
Defined in src/timepicker/timepicker.component.ts:108

Static timePickerCount
`timePickerCount: `number``
Type : `number`
Default value : `0`
Defined in src/timepicker/timepicker.component.ts:54
Tracks the total number of selects instantiated. Used to generate unique IDs

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding,
    	TemplateRef,
    	HostListener
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";

    /**
     * [See demo](../../?path=/story/time-picker--simple)
     *
     * <example-url>../../iframe.html?id=time-picker--simple</example-url>
     */
    @Component({
    	selector: "ibm-timepicker",
    	template: `
    			<div class="bx--time-picker__input">
    				<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    				</label>
    				<input
    					[ngClass]="{
    						'bx--text-input--light': theme === 'light',
    						'bx--skeleton': skeleton
    					}"
    					[value]="value"
    					[placeholder]="placeholder"
    					[pattern]="pattern"
    					[attr.id]="id"
    					[disabled]="disabled"
    					maxlength="5"
    					(change)="onChange($event)"
    					type="text"
    					class="bx--time-picker__input-field bx--text-input">
    			</div>
    			<ng-content></ng-content>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: TimePicker,
    			multi: true
    		}
    	]
    })
    export class TimePicker implements ControlValueAccessor {
    	/**
    	 * Tracks the total number of selects instantiated. Used to generate unique IDs
    	 */
    	static timePickerCount = 0;

    	@HostBinding("class.bx--time-picker") timePicker = true;

    	@Input() label: string | TemplateRef<any>;
    	@Input() placeholder = "hh:mm";
    	@Input() pattern = "(1[012]|[0-9]):[0-5][0-9]";
    	@Input() id = `timepicker-${TimePicker.timePickerCount++}`;
    	@Input() disabled = false;
    	@Input() value: string;

    	/**
    	 * Set to true for a loading select.
    	 */
    	@Input() skeleton = false;

    	/**
    	 * `light` or `dark` select theme
    	 */
    	@Input() theme: "light" | "dark" = "dark";

    	@Output() valueChange: EventEmitter<string> = new EventEmitter();

    	writeValue(value: string) {
    		this.value = value;
    	}

    	registerOnChange(callback: any) {
    		this.onChangeHandler = callback;
    	}

    	registerOnTouched(callback: any) {
    		this.onTouchedHandler = callback;
    	}

    	setDisabledState(isDisabled: boolean) {
    		this.disabled = isDisabled;
    	}

    	onChange(event) {
    		this.onChangeHandler(event.target.value);
    		this.valueChange.emit(event.target.value);
    	}

    	@HostListener("blur")
    	blur() {
    		this.onTouchedHandler();
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}

    	protected onChangeHandler = (_: any) => { };
    	protected onTouchedHandler = () => { };
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""