ui.igDatePicker

ui.igDatePicker_image

igDatePicker コントロール は igDateEditor コントロールの機能を拡張したもので、jQuery UI Datepicker スクリプトを (jquery.ui.datepicker.js) ページに含める必要があります。igDatePicker コントロールの API の詳細については、igDateEditor および igEditor コントロールの API マニュアルを参照してください。jQuery UI 日付ピッカーの詳細については、jQuery UI オンライン ヘルプ (英語) を参照してください。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

以下のコード スニペットは、igDatePicker コントロールを初期化する方法を示します。

この API を使用して作業を開始するための情報はここをクリックしてください。igDatePicker コントロールに必要なスクリプトとテーマを参照する方法については、Ignite UI の JavaScript リソースの使用および Ignite UI のスタイリングとテーマをご覧ください。

コード サンプル

<!doctype html>
<html>
<head>
    <title>Ignite UI igDatePicker</title>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
      <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#datePicker").igDatePicker({
                width: 280,
                dateInputFormat: "dateTime",
                regional: "en-US",
                placeHolder: "Pick Date",
                datepickerOptions: {
                    showWeek: true
                }
            });
        });
    </script>
</head>
<body>
    <input id="datePicker" />
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui-1.9.0.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.popover.js
infragistics.ui.notifier.js
infragistics.ui.validator.js

継承

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.