Ignite UI for Web Components Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。
Ignite UI for Web Components Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。Web Components Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。
IgcDatePickerComponent コンポーネントは、Ignite UI for Web Components のバージョン 5.0.0 以降の新しいコンポーネントです。このバージョンより前の古い IgcDatePickerComponent は XDatePicker に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。
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 Date Picker を使用した作業の開始
まず、次のコマンドを実行して 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
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
