### File

`src/datepicker-input/datepicker-input.component.ts`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true }`
selector | `ibm-date-picker-input`
template |
    	<div class="bx--form-item">
    		<div class="bx--date-picker"
    			[ngClass]="{
    				'bx--date-picker--single' : type === 'single',
    				'bx--date-picker--range' : type === 'range',
    				'bx--date-picker--light' : theme === 'light',
    				'bx--skeleton' : skeleton
    			}">
    			<div class="bx--date-picker-container">
    				<label *ngIf="label" [for]="id" class="bx--label">
    					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    				</label>
    				<div class="bx--date-picker-input__wrapper">
    					<input
    						#input
    						*ngIf="!skeleton"
    						autocomplete="off"
    						type="text"
    						class="bx--date-picker__input"
    						[value]="value"
    						[pattern]="pattern"
    						[placeholder]="placeholder"
    						[id]= "id"
    						[disabled]="disabled"
    						(change)="onChange($event)"/>
    						<ibm-icon-calendar16 class="bx--date-picker__icon">
    						</ibm-icon-calendar16>
    				</div>
    				<div *ngIf="invalid" class="bx--form-requirement">
    					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    				</div>
    			</div>
    		</div>
    </div>

### Index

###### Properties
Private Static datePickerCount input onTouched propagateChange
###### Methods
Public isTemplate onChange Public registerOnChange Public registerOnTouched Public writeValue
###### Inputs
disabled hasIcon id invalid invalidText label pattern placeholder skeleton theme type value
###### Outputs
valueChange

### Constructor

`constructor(elementRef: ElementRef)`
Defined in src/datepicker-input/datepicker-input.component.ts:92
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No

### Inputs

`disabled` | Default value : `false`
Defined in src/datepicker-input/datepicker-input.component.ts:82

`hasIcon` | Default value : `false`
Defined in src/datepicker-input/datepicker-input.component.ts:70

`id` | Default value : ``datepicker-${DatePickerInput.datePickerCount++}``
Defined in src/datepicker-input/datepicker-input.component.ts:68

`invalid` | Default value : `false`
Defined in src/datepicker-input/datepicker-input.component.ts:84

`invalidText` | Type : `string | TemplateRef<any>`
Defined in src/datepicker-input/datepicker-input.component.ts:86

`label` | Type : `string | TemplateRef<any>`
Defined in src/datepicker-input/datepicker-input.component.ts:72

`pattern` | Default value : `"^\\d{1,2}/\\d{1,2}/\\d{4}$"`
Defined in src/datepicker-input/datepicker-input.component.ts:76

`placeholder` | Default value : `"mm/dd/yyyy"`
Defined in src/datepicker-input/datepicker-input.component.ts:74

`skeleton` | Default value : `false`
Defined in src/datepicker-input/datepicker-input.component.ts:88

`theme` | Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/datepicker-input/datepicker-input.component.ts:80

`type` | Select a calendar type for the `model`. Internal purposes only. Type : `"simple" | "single" | "range"` Default value : `"simple"`
Defined in src/datepicker-input/datepicker-input.component.ts:66

`value` | Default value : `""`
Defined in src/datepicker-input/datepicker-input.component.ts:90

### Outputs

`valueChange` | `$event` Type: `EventEmitter<string>`
Defined in src/datepicker-input/datepicker-input.component.ts:78

### Methods

Public isTemplate
`isTemplate(value)`
Defined in src/datepicker-input/datepicker-input.component.ts:119
Parameters :
Name | Optional
value | No
Returns : `boolean`

onChange
`onChange(event)`
Defined in src/datepicker-input/datepicker-input.component.ts:96
Parameters :
Name | Optional
event | No
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:107
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:111
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public writeValue
`writeValue(value: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:103
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

### Properties

Private Static datePickerCount
`datePickerCount: `number``
Type : `number`
Default value : `0`
Defined in src/datepicker-input/datepicker-input.component.ts:61

input
`input: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('input')`
Defined in src/datepicker-input/datepicker-input.component.ts:92

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => {}`
Defined in src/datepicker-input/datepicker-input.component.ts:115

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Defined in src/datepicker-input/datepicker-input.component.ts:117

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	ElementRef,
    	TemplateRef,
    	ViewChild
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

    @Component({
    	selector: "ibm-date-picker-input",
    	template: `
    	<div class="bx--form-item">
    		<div class="bx--date-picker"
    			[ngClass]="{
    				'bx--date-picker--single' : type === 'single',
    				'bx--date-picker--range' : type === 'range',
    				'bx--date-picker--light' : theme === 'light',
    				'bx--skeleton' : skeleton
    			}">
    			<div class="bx--date-picker-container">
    				<label *ngIf="label" [for]="id" class="bx--label">
    					<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    					<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    				</label>
    				<div class="bx--date-picker-input__wrapper">
    					<input
    						#input
    						*ngIf="!skeleton"
    						autocomplete="off"
    						type="text"
    						class="bx--date-picker__input"
    						[value]="value"
    						[pattern]="pattern"
    						[placeholder]="placeholder"
    						[id]= "id"
    						[disabled]="disabled"
    						(change)="onChange($event)"/>
    						<ibm-icon-calendar16 class="bx--date-picker__icon">
    						</ibm-icon-calendar16>
    				</div>
    				<div *ngIf="invalid" class="bx--form-requirement">
    					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    				</div>
    			</div>
    		</div>
    </div>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: DatePickerInput,
    			multi: true
    		}
    	]
    })
    export class DatePickerInput {
    	private static datePickerCount = 0;
    	/**
    	 * Select a calendar type for the `model`.
    	 * Internal purposes only.
    	 */
    	@Input() type: "simple" | "single" | "range" = "simple";

    	@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;

    	@Input() hasIcon = false;

    	@Input() label: string | TemplateRef<any>;

    	@Input() placeholder = "mm/dd/yyyy";

    	@Input() pattern = "^\\d{1,2}/\\d{1,2}/\\d{4}$";

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

    	@Input() theme: "light" | "dark" = "dark";

    	@Input() disabled = false;

    	@Input() invalid = false;

    	@Input() invalidText: string | TemplateRef<any>;

    	@Input() skeleton = false;

    	@Input() value = "";

    	@ViewChild("input") input: ElementRef;

    	constructor(protected elementRef: ElementRef) {}

    	onChange(event) {
    		this.value = event.target.value;
    		this.valueChange.emit(this.value);
    		this.propagateChange(this.value);
    		this.onTouched();
    	}

    	public writeValue(value: any) {
    		this.value = value;
    	}

    	public registerOnChange(fn: any) {
    		this.propagateChange = fn;
    	}

    	public registerOnTouched(fn: any) {
    		this.onTouched = fn;
    	}

    	onTouched: () => any = () => {};

    	propagateChange = (_: any) => {};

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""