Angular 날짜 시간 편집기 지시어

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

    Angular Date Time Editor Directive Example

    Getting Started with Angular Date Time Editor Directive

    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();
}

    이제 Ignite UI for Angular Date Time Editor 모듈이나 디렉티브를 가져왔으니, 디렉티브를igxDateTimeEditor 사용할 수 있습니다.

    Using the Angular Date Time Editor Directive

    입력을 날짜 편집기로 사용하려면 igxDateTimeEditor 명령어와 유효한 날짜 객체를 값으로 설정하세요. 완전한 편집기 스타일과 느낌을 원하면, 입력을 igx-input-group으로 감싸세요. 이렇게 하면 다음 지침igxInput 들을 활용할 뿐만 아니라,igxLabel​igx-prefix​igx-suffix​igx-hint 폼 입력을 다룰 때 흔히 겪는 상황도 다룰 수 있습니다.

    Binding

    Date 객체value를 다음과 같이 설정하는 기본 구성 시나리오:

    public date = new Date();

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

    양방향 데이터 바인딩을 생성하려면 다음을ngModel 설정하세요:

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

    ISO 문자열에 바인딩

    그들은IgxDateTimeEditorDirective 조건을ISO 8601 받아들입니다.

    문자열은 전체ISO 문자열일 수도 있고, 형식YYYY-MM-DDTHH:mm:ss.sssZ 상 날짜 전용 부분과 시간만 있는 부분으로 분리될 수도 있습니다.

    날짜만

    날짜 전용 문자열이 명령어에 바인딩되어 있다면, -YYYY-MM-DD의 형식을 따라야 합니다. 이 규칙은 문자열 값을 지시문에 바인딩할 때만 적용되며,inputFormat 편집기에서 값을 입력할 때도 여전히 사용되며 반드시 같은 형식일 필요는 없습니다. 또한, 날짜 전용 문자열을 묶을 때, 지시문은 시간을 강제하여 시간T00:00:00 이동을 방지합니다.

    시간 한정

    시간 전용 문자열은 일반적으로 명세에서ECMA 정의되지 않지만, 시간 전용 솔루션이 필요한 상황에서 지시를 통합할 수 있도록 24시간 형식 -HH:mm:ss을 지원합니다. 12시간 형식은 지원되지 않습니다. 또한 이 내용은 결합된 값에만 적용됩니다.

    전체 ISO 문자열

    전체ISO 문자열이 바인딩된 경우, 명령은 에Date.parse 필요한 모든 요소가 제공될 때만 이를 파싱합니다.

    모든 거짓 수치, 포함하여InvalidDate는 다음과null 같이 파싱됩니다. 불완전한 날짜 전용, 시간만, 전체ISO 문자열은 다음과InvalidDate 같이 파싱됩니다.

    Keyboard Navigation

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

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

    • Arrow Up / Down- 증가/감소 날짜 부분. 관련 항목 보기spinLoop

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

    Examples

    Display and input format

    ​IgxDateTimeEditor다양한 디스플레이 및 입력 포맷을 지원합니다.

    Angular 를DatePipe 사용하여 미리 정의된 형식 옵션(예:shortDate andlongDate)을 지원합니다. 또한 지원되는 문자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>

    아래 표는 해당 지침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 섹션입니다.
    Note

    이 지침은IgxDateTimeEditorDirective IME 입력을 지원합니다. 아시아어 입력을 입력할 때, 컨트롤은 입력기 구성과 후보 목록을 컨트롤의 편집 영역에 직접 표시하고, 작성이 끝나면 즉시 주변 텍스트를 다시 재생합니다.

    Min max value

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

    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>

    입력minValue은minValue 타입string도 가질 수 있으며, ISO 문자열 바인딩을 참조하세요.

    Increment and decrement

    igxDateTimeEditor지침은 대중increment과decrement 방법을 폭로합니다. 현재 설정된 날짜와 시간 중 특정DatePart 금액을 증가 또는 감소시키며, 여러 가지 방식으로 사용할 수 있습니다.

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

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

    또한,spinDelta는 타입DatePartDeltas의 입력 속성이며, 각 날짜 시간 구간에 다른 델타를 적용하는 데 사용할 수 있습니다. 키보드로 회전할 때도increment, 그리고 메서드decrement​delta가 제공되지 않는 한 매개변수가 우선권을 가지spinDelta 기 때문에 적용됩니다.

    In Angular Forms

    Date Time Editor Directive는 핵심 FormsModuleNgModel 및ReactiveFormsModule (FormControl, FormGroup 등)에서 모든 폼 지침을 지원합니다. 여기에는 폼Validators 기능도 포함됩니다. 다음 예시는 템플릿 기반 폼에서 검증기를 어떻게 사용required 하는지 보여줍니다.

    Note

    필요하다면 이벤트를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>

    Text Selection

    컴포넌트가 포커스igxTextSelection에 입력된 모든 텍스트를 선택하도록 강제할 수 있습니다. 자세한 정보는igxTextSelection​ ​라벨 및 입력 페이지에서 확인하세요.

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

    구성 요소가 제대로 작동하려면 지시문 이후에igxTextSelection 설정igxDateTimeEditor 하는 것이 매우 중요합니다. 이유는 두 명령 모두 입력focus 이벤트에 대해 작동하기 때문에 텍스트 선택은 마스크가 설정된 후에 이루어져야 하기 때문입니다.

    스타일링

    자세한 내용은 해당 사이트를 참고하세요Input Group styling guide.

    API References

    Additional Resources

    관련 주제:

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