### 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
    					*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
- 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:90

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:117

Parameters :

Name | Optional
value | No

Returns : `boolean`

onChange
`onChange(event)`
Defined in src/datepicker-input/datepicker-input.component.ts:94

Parameters :

Name | Optional
event | No

Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:105

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:109

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public writeValue
`writeValue(value: any)`
Defined in src/datepicker-input/datepicker-input.component.ts:101

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:60

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

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

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	ElementRef,
    	TemplateRef
    } 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
    						*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 = "";

    	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 ""