WebAPI Document - GUIソリューション - プラクティス#2

日付入力パーツを追加

今回のプラクティスでは日付入力パーツの設置と動作確認を行います。

日付入力パーツをインクルードします。

<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiDateTime.css">
<script type="text/javascript" src="expGuiDateTime.js?key=keycode"></script>

※keycodeにはご契約のアクセスキーを設定してください。

初期化用のスクリプトを追加します。

<script type="text/javascript">
<!--
var dateTimeApp;// 日付入力パーツ
function init(){
  // 日付入力パーツ初期化
  dateTimeApp = new expGuiDateTime(document.getElementById("dateTime"));
  dateTimeApp.dispDateTime();
}
// -->
</script>

※パーツの変数はグローバル化しておくと他の関数からも呼び出せて便利です。

HTMLに日付入力パーツを表示するdivタグを追加します。

<div id="dateTime"></div>

bodyにonLoadを追加します。

<body onLoad="Javascript:init();">

サンプル

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <title>
    Webサービスサンプル
    </title>
    <!-- ヘッダ部分 -->
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiDateTime.css">
    <script type="text/javascript" src="expGuiDateTime.js?key=rnwfzKX4rvNVZYat"></script>
    <!-- 初期化スクリプト部分 -->
    <script type="text/javascript">
      <!--
var dateTimeApp;// 日付入力パーツ
/*
 * パーツを初期化
 */
function init(){
  // 日付入力パーツ初期化
  dateTimeApp = new expGuiDateTime(document.getElementById("dateTime"));
  dateTimeApp.dispDateTime();
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <!-- パーツ表示部分 -->
    <div id="dateTime"></div>
  </body>
</html>

次のプラクティスへ