OSS で利用できる機能
エディター - エディターのローカリゼーション
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
英語 (米国) (en-US)
日本 (ja)
タミル (インド) (ta)
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、日付、時間、通貨の書式設定を変更するためにエディターの領域オプションにカルチャが設定されます。ここに 3 つの設定が構成されています。infragistics.ui.regional-i18n.js ファイルに他の設定があります。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style>
@media all and (max-width: 360px) {
.ui-datepicker {
width: 250px;
}
}
</style>
</head>
<body>
<div class="editors">
<h4>英語 (米国) (en-US)</h4>
<div id="enUsDatePicker"></div>
<div id="enUsTimeEditor"></div>
<div id="enUsCurrencyEditor"></div>
<h4>日本 (ja)</h4>
<div id="jaDatePicker"></div>
<div id="jaTimeEditor"></div>
<div id="jaCurrencyEditor"></div>
<h4>タミル (インド) (ta)</h4>
<div id="taDatePicker"></div>
<div id="taTimeEditor"></div>
<div id="taCurrencyEditor"></div>
</div>
<!-- JavaScript files containing all needed regional settings -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/i18n/regional/infragistics.ui.regional-en.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ta.js"></script>
<script>
$(function () {
// --------- en-US ----------
$("#enUsDatePicker").igDatePicker({
width: "260px",
value: new Date(),
readOnly: true,
dropDownOnReadOnly: true,
dateDisplayFormat: "dateLong",
regional: "en-US"
});
$("#enUsTimeEditor").igDateEditor({
width: 100,
value: new Date(),
dateInputFormat: "timeLong",
dateDisplayFormat: "timeLong",
regional: "en-US"
});
$("#enUsCurrencyEditor").igCurrencyEditor({
width: 100,
value: 86753.09,
regional: "en-US"
}); // ----- END en-US -----
// --------- ja ----------
$("#jaDatePicker").igDatePicker({
width: "260px",
value: new Date(),
readOnly: true,
dropDownOnReadOnly: true,
dateDisplayFormat: "dateLong",
regional: "ja"
});
$("#jaTimeEditor").igDateEditor({
width: 100,
value: new Date(),
dateInputFormat: "timeLong",
dateDisplayFormat: "timeLong",
regional: "ja"
});
$("#jaCurrencyEditor").igCurrencyEditor({
width: 100,
value: 86753.09,
regional: "ja"
}); // ----- END ja -----
// --------- ta ----------
$("#taDatePicker").igDatePicker({
width: "260px",
value: new Date(),
readOnly: true,
dropDownOnReadOnly: true,
dateDisplayFormat: "dateLong",
regional: "ta"
});
$("#taTimeEditor").igDateEditor({
width: 100,
value: new Date(),
dateInputFormat: "timeLong",
dateDisplayFormat: "timeLong",
regional: "ta"
});
$("#taCurrencyEditor").igCurrencyEditor({
width: 100,
value: 86753.09,
regional: "ta"
}); // ----- END ta -----
});
</script>
</body>
</html>