Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxDateRangeEndComponent

Defines the end input for a date range picker

Igx Module

IgxDateRangePickerModule

Igx Theme

igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme

Igx Keywords

date, range, date range, date picker

Igx Group

scheduling

Remarks

When templating, end input has to be template separately

Example

<igx-date-range-picker mode="dropdown">
     ...
     <igx-date-range-end>
         <input igxInput igxDateTimeEditor type="text">
     </igx-date-range-end>
</igx-date-range-picker>

Hierarchy

Hierarchy

  • IgxDateRangeInputsBaseComponent
    • IgxDateRangeEndComponent

Constructors

Properties

Accessors

Constructors

constructor

Properties

dateTimeEditor

dateTimeEditor: IgxDateTimeEditorDirective

defaultClass

defaultClass: boolean = true

Property that enables/disables the auto-generated class of the IgxInputGroupComponent. By default applied the class is applied.

 @ViewChild("MyInputGroup")
 public inputGroup: IgxInputGroupComponent;
 ngAfterViewInit(){
 this.inputGroup.defaultClass = false;

}

element

element: ElementRef<HTMLElement>

inputDirective

inputDirective: IgxInputDirective

suppressInputAutofocus

suppressInputAutofocus: boolean = false

Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).

Remarks

Automatic focus causes software keyboard to show on mobile devices.

Example

<igx-input-group [suppressInputAutofocus]="true"></igx-input-group>

Accessors

hasBorder

  • get hasBorder(): boolean

  • Returns whether the IgxInputGroupComponent has border.

    @ViewChild("MyInputGroup")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let inputBorder = this.inputGroup.hasBorder;
    }

    Returns boolean

hasHints

isTypeBootstrap

  • get isTypeBootstrap(): boolean

  • Returns true if the IgxInputGroupComponent theme is Bootstrap.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
    }

    Returns boolean

isTypeBorder

  • get isTypeBorder(): boolean

  • Returns whether the IgxInputGroupComponent type is border.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeBorder = this.inputGroup.isTypeBorder;
    }

    Returns boolean

isTypeBox

  • get isTypeBox(): boolean

  • Returns whether the IgxInputGroupComponent type is box.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeBox = this.inputGroup.isTypeBox;
    }

    Returns boolean

isTypeFluent

  • get isTypeFluent(): boolean

  • Returns true if the IgxInputGroupComponent theme is Fluent.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeFluent = this.inputGroup.isTypeFluent;
    }

    Returns boolean

isTypeIndigo

  • get isTypeIndigo(): boolean

  • Returns true if the IgxInputGroupComponent theme is Indigo.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeIndigo = this.inputGroup.isTypeIndigo;
    }

    Returns boolean

isTypeLine

  • get isTypeLine(): boolean

  • Returns whether the IgxInputGroupComponent type is line.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeLine = this.inputGroup.isTypeLine;
    }

    Returns boolean

isTypeSearch

  • get isTypeSearch(): boolean

  • Returns whether the IgxInputGroupComponent type is search.

    @ViewChild("MyInputGroup1")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit(){
       let isTypeSearch = this.inputGroup.isTypeSearch;
    }

    Returns boolean

resourceStrings

theme

  • get theme(): IgxTheme

  • Returns the theme of the input. The returned value is of type IgxInputGroupType.

    @ViewChild("MyInputGroup")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit() {
     let inputTheme = this.inputGroup.theme;

    Returns IgxTheme

  • set theme(value): void

  • Sets the theme of the input. Allowed values of type IgxInputGroupTheme.

    @ViewChild("MyInputGroup")
    public inputGroup: IgxInputGroupComponent;
    ngAfterViewInit() {
     let inputTheme = 'fluent';

    Parameters

    • value: IgxTheme

    Returns void

type