Common interface for Components with show and collapse functionality

Constructors

Section titled "Constructors"

PickerBaseDirective

new PickerBaseDirective(): PickerBaseDirective

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:343

Returns PickerBaseDirective

Properties

Section titled "Properties"

closed

Section titled "closed"

Emitted after the calendar has closed.

 
closed: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:278

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

Section titled "closing"

Emitted when the calendar has started closing, cancelable.

 
closing: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:267

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

disabled

Section titled "disabled"

Enables or disables the picker.

 
disabled: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>

element

Section titled "element" 
element: ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31

headerOrientation

Section titled "headerOrientation"

Gets/Sets the orientation of the IgxDatePickerComponent header.

 
headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideHeader

Section titled "hideHeader"

Gets/Sets whether the header is hidden in dialog mode.

 
hideHeader: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122

Example

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>

mode

Section titled "mode"

Can be dropdown with editable input field or dialog with readonly input field.

 
mode: PickerInteractionMode = PickerInteractionMode.DropDown

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100

Remarks

Default mode is dropdown

Example

<igx-date-picker mode="dialog"></igx-date-picker>

opened

Section titled "opened"

Emitted after the calendar has opened.

 
opened: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:256

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

Section titled "opening"

Emitted when the calendar has started opening, cancelable.

 
opening: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:245

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

outlet

Section titled "outlet"

The container used for the pop-up element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:204

Example

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->

overlaySettings

Section titled "overlaySettings"

Overlay settings used to display the pop-up element.

 
overlaySettings: OverlaySettings

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133

Example

<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>

placeholder

Section titled "placeholder"

Sets the placeholder of the picker's input.

 
placeholder: string = ''

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86

Example

<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>

tabIndex

Section titled "tabIndex"

Gets/Sets the default template editor's tabindex.

 
tabIndex: string | number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:234

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>

valueChange

Section titled "valueChange" 
valueChange: EventEmitter<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:341

displayFormat

Section titled "displayFormat" 
displayFormat: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:69, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:73

inputFormat

Section titled "inputFormat" 
inputFormat: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:48, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:52

locale

Section titled "locale" 
locale: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165

type

Section titled "type" 
type: IgxInputGroupType

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:218, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:221

weekStart

Section titled "weekStart" 
weekStart: number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets the picker's pop-up state.

get collapsed(): boolean

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:316

Example

const state = this.picker.collapsed;

Returns boolean

Methods

Section titled "Methods"

clear

Section titled "clear" 
clear(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:406

Returns void

close

Section titled "close" 
close(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:405

Returns void

getEditElement

Section titled "getEditElement"

Return the focusable native element

getEditElement(): HTMLInputElement

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:407

Returns HTMLInputElement

open

Section titled "open" 
open(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:403

Parameters

Returns void

select

Section titled "select" 
select(value: string | Date | DateRange): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:402

Parameters

Returns void

toggle

Section titled "toggle" 
toggle(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:404

Parameters

Returns void