Ignite UI for Web Components Date Picker는 수동 텍스트 입력을 통해 날짜를 입력하거나 팝업되는 달력 대화 상자에서 날짜 값을 선택하는 데 사용되는 기능이 풍부한 구성 요소입니다. 가볍고 사용이 간편한 날짜 선택기를 사용하면 월, 연도 및 10년과 같은 여러 보기 옵션을 사용하여 원하는 날짜로 이동할 수 있습니다. 또한 최소 및 최대 날짜 제약 조건과 필수 필드와 같은 일반적인 유효성 검사 속성을 지원합니다.
Ignite UI for Web Components Date Picker Component를 사용하면 월별 보기 캘린더 드롭다운 또는 편집 가능한 입력 필드를 통해 단일 날짜를 선택할 수 있습니다. Web Components Date Picker는 달력에서만 선택할 수 있는 대화 상자 모드, 로캘 인식 및 사용자 지정 가능한 날짜 형식 및 유효성 검사 통합도 지원합니다.
IgcDatePickerComponent는 Ignite UI for Web Components 버전 5.0.0의 새로운 구성 요소입니다. 이 버전 이전의 이전 IgcDatePickerComponent는 XDatePicker로 이름이 바뀌었고 해당 설명서 페이지는 "Deprecated Components"에서 찾을 수 있습니다.
Web Components 날짜 선택기 예제
아래에서는 사용자가 수동 텍스트 입력을 통해 날짜를 선택하고 왼쪽의 달력 아이콘을 클릭하여 해당 날짜로 이동할 수 있을 때 날짜 선택기가 작동하는 방식을 보여주는 샘플을 볼 수 있습니다. 렌더링 방법을 참조하십시오.
EXAMPLE
TS
HTML
CSS
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerOverview{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerOverview();
ts
<!DOCTYPE html><html><head><title>Date Picker Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
Web Components 날짜 선택기 시작하기
먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerDialogMode{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerDialogMode();
ts
<!DOCTYPE html><html><head><title>Date Picker Dialog Mode</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"mode="dialog"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
import { defineComponents, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent);
exportclassDatePickerFormat{
constructor() {
let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
const date = newDate();
datePicker.value = date;
}
}
new DatePickerFormat();
ts
<!DOCTYPE html><html><head><title>Date Picker Display Format</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickerid="date-picker"display-format="shortDate"input-format="dd/MM/yy"></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
양식에서는 구성 요소의 이벤트를 처리 igcChange 하고 레이블의 값을 업데이트할 수 있습니다.
EXAMPLE
TS
HTML
CSS
import { defineComponents, IgcButtonComponent, IgcDatePickerComponent } from'igniteui-webcomponents';
import'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDatePickerComponent, IgcButtonComponent);
exportclassDatePickerOverview{
constructor() {
let form = document.getElementById('form') as HTMLFormElement;
let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
let formStatus = document.getElementById('formStatus') as HTMLElement;
let datePicker = document.getElementById('datePicker') as IgcDatePickerComponent;
let resetButton = document.getElementById('resetButton') as IgcButtonComponent;
const date = newDate(2024, 4, 15);
const minDate = newDate(date.getFullYear(), date.getMonth(), date.getDate() - 10);
const maxDate = newDate(date.getFullYear(), date.getMonth(), date.getDate() + 15);
datePicker.value = date;
datePicker.max = maxDate;
datePicker.min = minDate;
datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
resetButton.addEventListener('click', this.reset);
datePicker.addEventListener("igcChange", () => {
datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
});
}
publicreset(){
let form = document.getElementById('form') as HTMLFormElement;
let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
let formStatus = document.getElementById('formStatus') as HTMLElement;
datePickerValue.innerHTML = "Date picker value: ";
formStatus.innerHTML = "Form valid: ";
form.reset();
}
}
new DatePickerOverview();
ts
<!DOCTYPE html><html><head><title>Date Picker Inside A Form</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><formid="form"><igc-date-pickerid="datePicker"required><pslot="helper-text">Date</p></igc-date-picker><div><igc-buttonid="submitButton"onclick="form.requestSubmit()">Submit</igc-button><igc-buttonid="resetButton">Reset</igc-button></div></form><pid="datePickerValue"></p><pid="formStatus"></p></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Date Picker Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-date-pickermode="dialog"><pslot="helper-text">Date</p></igc-date-picker></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
