クラス IgxDateRangePickerComponent

カレンダー UI または編集可能な入力から日付の範囲を選択する機能を提供します。

@igxmodule

IgxDateRangeModule

@igxtheme

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

@igxkeywords

date, range, date range, date picker

@igxgroup

scheduling

@備考:

範囲の選択が 1 つまたは 2 つの入力フィールドに表示されます。 デフォルトのテンプレートは単一の読み取り専用入力フィールドを表示しますが、 igx-date-range-startigx-date-range-end を投影すると 2 つの 編集可能な入力フィールドが表示されます。

@例:
<igx-date-range-picker mode="dropdown"></igx-date-range-picker>

階層

実装

  • DoCheck
  • OnInit
  • IToggleView
  • OnChanges
  • OnInit
  • AfterViewInit
  • OnDestroy
  • ControlValueAccessor
  • Validator

コンストラクタ

constructor

プロパティ

disabled

disabled: boolean

IgxDateRangePickerComponent を有効/無効にします。

@例:
<igx-date-range-picker [disabled]="'true'"></igx-date-range-picker>

displayFormat

displayFormat: string

編集可能な入力がフォーカスされていないときに使用される日付書式。

@備考:

Angular の DatePipe を使用します。

@例:
<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>

doneButtonText

doneButtonText: string = "Done"

カレンダー ダイアログの done ボタンのデフォルトのテキスト。

@備考:

デフォルト値は Done です。 ボタンは dialog モードでのみ表示されます。

@例:
<igx-date-range-picker doneButtonText="done"></igx-date-range-picker>

element

element: ElementRef

formatter

formatter: function

選択した日付または渡した日付にカスタム書式関数。

@例:
private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });
public formatter(date: Date): string {
 return `${this.dayFormatter.format(date)} - ${this.monthFormatter.format(date)} - ${date.getFullYear()}`;
}
<igx-date-range-picker [formatter]="formatter"></igx-date-range-picker>

Type declaration

hideOutsideDays

hideOutsideDays: boolean

現在の月以外の日付を表示するかどうかを取得または設定します。

@備考:

デフォルト値は false です。

@例:
<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker>

inputFormat

inputFormat: string

予期されるユーザー入力形式とプレースホルダー。

@備考:

デフォルトは "'MM/dd/yyyy'" です。

@例:
<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>

label

locale

locale: string

値の書式とカレンダーに使用されるロケール設定。

@備考:

デフォルトでは、Angular の LOCALE_ID を使用します。入力マスクと表示形式が設定されていない場合、両方に影響します。 locale が設定されている場合は、registerLocaleData を介して登録する必要があります。 https://angular.io/guide/i18n#i18n-pipes を参照してください。 登録されていない場合、フォーマットには Intl が使用されます。

@例:
<igx-date-range-picker locale="jp"></igx-date-range-picker>

mode

mode: InteractionMode = InteractionMode.Dialog

dialog または dropdown モードのいずれかでカレンダーを表示します。

@備考:

デフォルトのモードは dialog です。

@例:
<igx-date-range-picker mode="dropdown"></igx-date-range-picker>

monthsViewNumber

monthsViewNumber: number = 2

表示される月ビューの数。

@備考:

デフォルトは 2 です。

@例:
<igx-date-range-picker [monthsViewNumber]="3"></igx-date-range-picker>

onClosed

onClosed: EventEmitter<IBaseEventArgs> = new EventEmitter<IBaseEventArgs>()

IgxDateRangeComponent が閉じたときに発生されます。

@例:
<igx-date-range-picker (onClosed)="handleClosed($event)"></igx-date-range-picker>

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

カレンダーが閉じ始めるときに発生します。キャンセルできます。

@例:
<igx-date-range-picker (onClosing)="handleClosing($event)"></igx-date-range-picker>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<IBaseEventArgs> = new EventEmitter<IBaseEventArgs>()

IgxDateRangeComponent が開いたときに発生されます。

@例:
<igx-date-range-picker (onOpened)="handleOpened($event)"></igx-date-range-picker>

onOpening

onOpening: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

カレンダーが開いたときに発生します。キャンセルできます。

@例:
<igx-date-range-picker (onOpening)="handleOpening($event)"></igx-date-range-picker>

overlaySettings

overlaySettings: OverlaySettings

カレンダーの表示に使用する必要なカスタム オーバーレイ設定。

@例:
<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>

placeholder

placeholder: string = ""

1 つの入力の IgxDateRangePickerComponentplaceholder を設定します。

@例:
<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>

rangeSelected

rangeSelected: EventEmitter<DateRange> = new EventEmitter<DateRange>()

範囲が選択されたときに発生されます。

@例:
<igx-date-range-picker (rangeSelected)="handleSelected($event)"></igx-date-range-picker>

weekStart

weekStart: WEEKDAYS = WEEKDAYS.SUNDAY

週の最初の曜日。

@備考:

数値または WEEKDAYS の列挙型の値に割り当てます。

@例:
<igx-date-range-picker [weekStart]="1"></igx-date-range-picker>

アクセサー

collapsed

  • get collapsed(): boolean

displayDensity

maxValue

  • get maxValue(): Date | string
  • set maxValue(value: Date | string): void

minValue

  • get minValue(): Date | string
  • set minValue(value: Date | string): void

value

メソッド

close

  • close(): void

ngDoCheck

  • ngDoCheck(): void

open

selectRange

  • selectRange(startDate: Date, endDate?: Date): void
  • 日付の範囲を選択します。endDate が渡されていない場合、範囲は 1 日 (startDate のみ) です。

    @例:
    public selectFiveDayRange() {
     const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
     const today = new Date();
     this.dateRange.selectRange(today, inFiveDays);
    }

    パラメーター

    • startDate: Date
    • オプション endDate: Date

    返却 void

toggle