Angular 날짜 시간 편집기 지시어

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

Angular Date Time Editor 지시문 예제

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui-angular';

@Component({
    selector: 'app-datetime-basic',
    styleUrls: ['./datetime-basic.component.scss'],
    templateUrl: './datetime-basic.component.html',
    imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective]
})
export class DateTimeBasicComponent {
    public date = new Date();
}
tsコピー

<igx-input-group>
    <label igxLabel>Choose Date</label>
    <input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [value]="date" [igxTextSelection]="true"/>
</igx-input-group>

htmlコピー

:host {
    display: block;
    padding: 1rem;
    max-width: 600px;
}
scssコピー

Edit in: CodesandboxStackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Angular Date Time Editor 지시문 시작하기

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

ng add igniteui-angular
cmd

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

다음 단계는 IgxDateTimeEditorModule 당신의 app.module.ts 파일.

// app.module.ts

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

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

또는 16.0.0부터 IgxDateTimeEditorDirective 독립형 종속성으로 가져올 수 있습니다.

// home.component.ts

import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// 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();
}
typescript

이제 Ignite UI for Angular Date Time Editor 모듈 또는 지시문을 가져왔으므로 지시문을 사용할 igxDateTimeEditor 수 있습니다.

Angular Date Time Editor 지시문 사용

입력을 날짜 시간 편집기로 사용하려면 igxDateTimeEditor 지시문과 유효한 날짜 객체를 값으로 설정하세요. 완전한 편집기 모양과 느낌을 가지려면 입력을 igx-input-group에 래핑하세요. 이를 통해 igxInput, igxLabel, igx-prefix, igx-suffix, igx-hint 지시문을 활용할 수 있을 뿐만 아니라 양식 입력을 처리할 때 일반적인 시나리오도 다룰 수 있습니다.

제본

Date 객체를 value으로 설정하는 기본 구성 시나리오:

public date = new Date();
typescript

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

양방향 데이터 바인딩을 만들려면 ngModel 설정하세요.

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

ISO 문자열에 바인딩

​IgxDateTimeEditorDirective는 ISO 8601 문자열을 허용합니다.

문자열은 YYYY-MM-DDTHH:mm:ss.sssZ 형식의 전체 ISO 문자열이거나 날짜 전용 부분과 시간 전용 부분으로 구분될 수 있습니다.

날짜만

날짜 전용 문자열이 지시문에 바인딩된 경우 YYYY-MM-DD 형식을 따라야 합니다. 이는 문자열 값을 지시문에 바인딩하는 경우에만 적용되며, 편집기에서 값을 입력할 때 inputFormat 계속 사용되며 동일한 형식일 필요는 없습니다. 또한 날짜 전용 문자열을 바인딩할 때 지시문은 시간을 T00:00:00으로 강제하여 시간 이동을 방지합니다.

시간 한정

시간 전용 문자열은 일반적으로 ECMA 사양에 정의되어 있지 않지만 시간 전용 솔루션이 필요한 시나리오에 지시문을 통합할 수 있도록 24시간 형식(HH:mm:ss을 지원합니다. 12시간 형식은 지원되지 않습니다. 또한 이는 제한된 값에만 적용된다는 점에 유의하세요.

전체 ISO 문자열

전체 ISO 문자열이 바인딩된 경우 지시문은 Date.parse에 필요한 모든 요소가 제공되는 경우에만 이를 구문 분석합니다.

를 포함한 InvalidDate 모든 false 값은 다음과 같이 null 구문 분석됩니다. 불완전한 날짜 전용, 시간 전용 또는 전체 ISO 문자열은 다음과 같이 InvalidDate 구문 분석됩니다.

키보드 탐색

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

• Ctrl / Cmd + 화살표 왼쪽 / 오른쪽- 날짜 섹션 사이를 이동합니다. Ctrl / Cmd + Right를 누르면 섹션의 끝으로 이동합니다. 이미 있는 경우 다음 섹션의 끝으로 이동합니다. 반대 방향에서도 비슷한 방식으로 작동합니다.

• 화살표 위 / 아래- 날짜 부분 증가/감소. 관련 spinLoop 보기

• Ctrl / 명령 +;- 편집기에서 현재 날짜와 시간을 설정합니다.

예

표시 및 입력 형식

​IgxDateTimeEditor는 다양한 표시 및 입력 형식을 지원합니다.

그것은 Angular 사용합니다 DatePipe, 다음과 같은 사전 정의된 형식 옵션을 지원할 수 있습니다 shortDate 그리고 longDate. 또한 에서 지원하는 문자를 사용하여 생성된 형식 문자열을 수락할 수도 있습니다. DatePipe, 예) EE/MM/yyyy. 다음과 같은 형식에 주목하십시오. shortDate, longDate, 등으로 사용할 수 있습니다. displayFormat 오직. 또한, 그렇지 않은 경우 displayFormat가 제공되면, 에디터는 inputFormat 그것의 것으로 displayFormat. 또는 inputFormat 속성이 설정되지 않은 경우 입력 형식은 다음에서 유추됩니다. displayFormat 숫자, 날짜-시간 부분만 포함하는 것으로 구문 분석할 수 있는 경우.

특정 입력 형식을 설정하려면 IgxDateTimeEditor 지시문에 문자열로 전달하세요. 그러면 예상되는 사용자 입력 형식과 편집기의 마스크가 모두 설정됩니다. 또한 inputFormat은 로캘 기반이므로 아무것도 제공되지 않으면 편집기는 기본적으로 브라우저에서 사용하는 형식을 사용합니다.

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

아래 표는 지시어의 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 섹션입니다.

​IgxDateTimeEditorDirective 지시문은 IME 입력을 지원합니다. 아시아 언어 입력을 입력할 때 컨트롤은 입력 방법 구성과 후보 목록을 컨트롤의 편집 영역에 직접 표시하고 구성이 끝나면 즉시 주변 텍스트를 다시 흐름합니다.

최소 최대 값

​minValue 및 maxValue 속성을 지정하여 입력을 제한하고 ngModel의 유효성을 제어할 수 있습니다.

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

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

html

​minValue 및 minValue 입력은 string 유형일 수도 있습니다. ISO 문자열에 바인딩을 참조하세요.

증가 및 감소

igxDateTimeEditor 지시문은 공개 increment 및 decrement 방법을 노출합니다. 현재 설정된 날짜 및 시간의 특정 DatePart 늘리거나 줄이며 몇 가지 방법으로 사용할 수 있습니다.

첫 번째 시나리오에서는 특정 DatePart 메서드에 전달되지 않으면 지정된 inputFormat 및 내부 지시어 구현에 따라 기본 DatePart 증가하거나 감소합니다. 두 번째 시나리오에서는 다양한 요구 사항에 맞게 조작할 DatePart 명시적으로 지정할 수 있습니다. 또한 두 방법 모두 증가/감소 단계를 설정하는 데 사용할 수 있는 number 유형의 선택적 delta 매개변수를 허용합니다.

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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { DatePart, IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-datetime-advanced',
    styleUrls: ['./datetime-advanced.scss'],
    templateUrl: './datetime-advanced.html',
    imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxSuffixDirective, IgxIconComponent]
})

export class DateTimeAdvancedComponent {
    public date = new Date((new Date()).setHours(9, 0, 0, 0));
    public datePart: typeof DatePart = DatePart;
}
tsコピー

<div class="datetime-wrapper">
    <igx-input-group>
        <input igxInput #dateEditor="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date">
        <igx-suffix>
            <igx-icon (click)="dateEditor.increment(datePart.Year)">keyboard_arrow_up</igx-icon>
            <igx-icon (click)="dateEditor.decrement(datePart.Year)">keyboard_arrow_down</igx-icon>
        </igx-suffix>
    </igx-input-group>
    <igx-input-group>
    <input igxInput #timeEditor="igxDateTimeEditor" type="text" [igxDateTimeEditor]="'hh:mm tt'" [(ngModel)]="date" [spinDelta]="{ minutes: 15 }">
    <igx-suffix>
        <igx-icon (click)="timeEditor.increment(datePart.Minutes)">keyboard_arrow_up</igx-icon>
        <igx-icon (click)="timeEditor.decrement(datePart.Minutes)">keyboard_arrow_down</igx-icon>
    </igx-suffix>
    </igx-input-group>
<div>
htmlコピー

.datetime-wrapper {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    igx-input-group {
        padding-right: 20px;
    }
    igx-suffix {
        user-select: none;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

또한 spinDelta​ ​DatePartDeltas 유형의 입력 속성이며 각 날짜 시간 세그먼트에 다른 델타를 적용하는 데 사용할 수 있습니다. 키보드로 회전할 때뿐만 아니라 increment 및 decrement 방법으로 회전할 때도 적용됩니다. 단, delta 매개변수가 spinDelta 보다 우선하므로 제공된 매개변수가 없는 한 적용됩니다.

Angular 형태에서

날짜 시간 편집기 지시문은 핵심 FormsModule NgModel 및 ReactiveFormsModule (FormControl, FormGroup 등)의 모든 양식 지시문을 지원합니다. 여기에는 양식 Validators 기능도 포함됩니다. 다음 예에서는 템플릿 기반 양식에서 required 유효성 검사기를 사용하는 방법을 보여줍니다.

필요한 경우 validationFailed 이벤트를 처리하고 사용 가능한 인수의 newValue 속성을 변경하여 유효한 상태로 되돌릴 수 있습니다.

템플릿 기반 양식 예:

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

텍스트 선택

다음을 사용하여 구성 요소가 포커스가 있는 모든 입력 텍스트를 선택하도록 할 수 있습니다. igxTextSelection. 더 많은 정보를 찾아보세요 igxTextSelection ~에 라벨 및 입력.

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

구성 요소가 제대로 작동하려면 igxDateTimeEditor 지시어 뒤에 igxTextSelection 설정하는 것이 중요합니다. 그 이유는 두 지시어 모두 입력 focus 이벤트에서 작동하므로 마스크가 설정된 후에 텍스트 선택이 발생해야 하기 때문입니다.

스타일링

자세한 내용은 Input Group styling guide 확인하세요.

API 참조

• IgxDateTimeEditor 지시어
• IgxHint 지시어
• IgxInput 지시어
• IgxInputGroupComponent
• IgxInputGroupComponent 스타일

추가 리소스

관련 주제:

• 마스크
• 라벨 및 입력
• 반응형 양식 통합

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular