クイックスタート

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに DatePager ウィジェットを追加する方法について学びます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。ウィジェットのカルチャを変更するために必要なグローバル参照も追加します。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<div id="datepager" style="margin-top:20px"></div>

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <!--Wijmo Globalization--> <!--Culture--> <script src="http://cdn.wijmo.com/external/cultures/globalize.culture.de-DE.js" type="text/javascript"></script>

マークアップ	コードのコピー
<div id="datepager" style="margin-top:20px"></div>

<head> タグ内の参照の下に次のスクリプトを追加して、ウィザードを初期化およびカスタマイズします。このスクリプトは、デフォルトの日ではなく週を表示するように viewType オプションを設定し、 firstDayOfWeek を日曜日ではなく月曜日に変更し、選択された日付を 2015 年５月 23 日に設定し、 culture をドイツ語に設定します。

メモ：selectedDate オプションの月の値はゼロベースです。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。日付をクリックすると、押している間、ローカライズされたツールチップテキストが表示されます。

関連トピック

参照