Angular 날짜 시간 편집기 지시어

Ignite UI for Angular Date Time Editor Directive를 사용하면 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크된 입력을 사용하여 날짜 또는 시간 부분을 편집할 수 있습니다. 또한 원하는 표시 및 입력 형식과 최소값 및 최대값을 지정하여 유효성 검사를 활용할 수 있습니다.

Angular Date Time Editor 지시문 예제

Angular Date Time Editor 지시문 시작하기

Ignite UI for Angular Date Time Editor 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxDateTimeEditorModule 당신의 app.module.ts 파일.

// app.module.ts

...
import { IgxDateTimeEditorModule } from 'igniteui-angular/directives';
// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDateTimeEditorModule],
    ...
})
export class AppModule {}

또는16.0.0 독립 실행형 의존성으로 가져올IgxDateTimeEditorDirective 수도 있습니다.

// home.component.ts

import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date" />
    </igx-input-group>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES]
})
export class HomeComponent {
    public date = new Date();
}

Now that you have the Ignite UI for Angular Date Time Editor module or directive imported, you can start using the igxDateTimeEditor directive.

Angular Date Time Editor 지시문 사용

To use an input as a date time editor, set an igxDateTimeEditor directive and a valid date object as value. In order to have complete editor look and feel, wrap the input in an igx-input-group. This will allow you to not only take advantage of the following directives igxInput, igxLabel, igx-prefix, igx-suffix, igx-hint, but will cover common scenarios when dealing with form inputs as well.

제본

A basic configuration scenario setting a Date object as a value:

public date = new Date();

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [value]="date" />
</igx-input-group>

To create a two-way data-binding, set an ngModel:

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>

ISO 문자열에 바인딩

The IgxDateTimeEditorDirective accepts an ISO 8601 strings.

The string can be a full ISO string, in the format YYYY-MM-DDTHH:mm:ss.sssZ or it could be separated into date-only and time-only portions.

날짜만

If a date-only string is bound to the directive, it needs to follow the format - YYYY-MM-DD. This applies only when binding a string value to the directive, the inputFormat is still used when typing values in the editor and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be T00:00:00.

시간 한정

Time-only strings are normally not defined in the ECMA specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - HH:mm:ss. The 12 hour format is not supported. Please also note that this applies for bound values only.

전체 ISO 문자열

If a full ISO string is bound, the directive will parse it only if all elements required by Date.parse are provided.

All false values, including InvalidDate will be parsed as null. Incomplete date-only, time-only, or full ISO strings will be parsed as InvalidDate.

날짜 시간 편집기 지시문에는 마우스를 터치하지 않고도 다양한 DatePart를 쉽게 증가, 감소 또는 이동할 수 있는 직관적인 키보드 탐색 기능이 있습니다.

Ctrl / Cmd + 화살표 왼쪽 / 오른쪽- 날짜 섹션 사이를 이동합니다. Ctrl / Cmd + Right를 누르면 섹션의 끝으로 이동합니다. 이미 있는 경우 다음 섹션의 끝으로 이동합니다. 반대 방향에서도 비슷한 방식으로 작동합니다.
Arrow Up / Down - increment/decrement date portions. See related spinLoop
Ctrl / 명령 +;- 편집기에서 현재 날짜와 시간을 설정합니다.

예

표시 및 입력 형식

The IgxDateTimeEditor supports different display and input formats.

It uses Angular's DatePipe, which allows it to support predefined format options, such as shortDate and longDate. It can also accept a constructed format string using characters supported by the DatePipe, e.g. EE/MM/yyyy. Notice that formats like shortDate, longDate, etc., can be used as displayFormat only. Also, if no displayFormat is provided, the editor will use the inputFormat as its displayFormat. Alternatively, if the inputFormat property is not set, the input format will be inferred from the displayFormat in case it can be parsed as containing numeric date-time parts only.

To set a specific input format, pass it as a string to the IgxDateTimeEditor directive. This will set both the expected user input format and the mask for the editor. Additionally, the inputFormat is locale based, so if none is provided, the editor will default to the one used by the browser.

<igx-input-group>
    <input type="text" igxInput [displayFormat]="'shortDate'" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date"/>
</igx-input-group>

The table bellow shows formats that are supported by the directive's inputFormat:

체재	설명
`d`	날짜는 편집하는 동안 앞에 0이 붙도록 강제됩니다.
`dd`	앞에 0이 명시적으로 설정된 날짜입니다.
`M`	월은 편집하는 동안 앞에 0이 붙도록 강제됩니다.
`MM`	앞에 0이 명시적으로 설정된 달입니다.
`yy`	짧은 연도 형식.
`yyyy`	전체 연도 형식입니다.
`h`	12시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다.
`hh`	앞에 0이 명시적으로 설정된 12시간 형식의 시간입니다.
`H`	24시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다.
`HH`	24시간 형식의 시간이며 앞에 0이 명시적으로 설정되어 있습니다.
`m`	분은 편집하는 동안 앞에 0이 붙도록 강제됩니다.
`mm`	앞에 0이 명시적으로 설정된 분입니다.
`tt`	12시간 형식의 AM/PM 섹션입니다.

메모

The IgxDateTimeEditorDirective directive supports IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends.

최소 최대 값

You can specify minValue and maxValue properties to restrict input and control the validity of the ngModel.

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/>
</igx-input-group>

The minValue and minValue inputs can also be of type string, see Binding to ISO strings.

증가 및 감소

igxDateTimeEditor directive exposes public increment and decrement methods. They increment or decrement a specific DatePart of the currently set date and time and can be used in a couple of ways.

In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified inputFormat and the internal directive implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional delta parameter of type number which can be used to set the increment/decrement step.

다음 샘플에서 두 가지를 모두 비교할 수 있습니다.

Additionally, spinDelta is an input property of type DatePartDeltas and it can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, as well as when spinning with the increment and decrement methods, as long as they don't have the delta parameter provided since it will take precedence over spinDelta.

Angular 형태에서

The Date Time Editor Directive supports all of the form directives from the core FormsModule NgModel and ReactiveFormsModule (FormControl, FormGroup, etc.). This also includes the Forms Validators functions. The following example illustrates the use of the required validator in a Template-driven Form.

메모

If needed, you can revert back to a valid state by handling the validationFailed event and changing the newValue property of the available arguments.

템플릿 기반 양식 예:

<form>
    <igx-input-group>
        <input igxInput type="text" [(ngModel)]="date" name="form" required
            (valueChanged)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)"
            [igxDateTimeEditor]="'dd/MM/yyyy'" [minValue]="minDate" [maxValue]="maxDate" [isSpinLoop]="false" />
    </igx-input-group>
</form>
<div class="divider--half"></div>

텍스트 선택

You can force the component to select all of the input text on focus using igxTextSelection. Find more info on igxTextSelection at Label & Input.

<igx-input-group>
    <input igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [igxTextSelection]="true"/>
</igx-input-group>

메모

In order for the component to work properly, it is crucial to set igxTextSelection after the igxDateTimeEditor directive. The reason for this is both directives operate on the input focus event so text selection should happen after the mask is set.

스타일링

For details check out the Input Group styling guide.