読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

Calandarコントロールを使うサンプル

Yahoo! UI Library : calendarを使ってカレンダーの表示と選択された日を取得するサンプルです。

  • 必要なソースを取り込んで、
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
  • 「YAHOO.widget.Calendar」をnewし、「render()」メソッドを実行すればカレンダーが表示されます。
    • コンストラクタ引数で、描画先となる要素のIDを渡します。
    • その他、選択可能範囲やデフォルトで選択されている日などがオプションで指定できるようです。
  • 選択された日の取得は、「Calandar#getSelectedDates()」を呼び出せばOK。
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> 
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
  <script type="text/javascript">
    function onLoad() {
      // カレンダーを描画
      calendar = new YAHOO.widget.Calendar("calendar");
      calendar.render();
    }
    // カレンダーで選択された日時を表示する関数
    function showDate() {
      var stdout = document.getElementById("stdout");
      stdout.innerHTML = "";
      // カレンダーから選択された日時を取り出す。
      var cals = calendar.getSelectedDates();
      for ( var i=0;i < cals.length; i++ ) {
         stdout.innerHTML += cals[i].toString();
      }
    }
  </script>
</head>
<body class="yui-skin-sam" onload="onLoad();">
  <!-- カレンダーを描くdiv要素 -->
  <div id="calendar"></div>
  <div>
    <!-- クリックでカレンダーで選択された日時を表示。 -->
    <a href="javascript:showDate();">選択された日時を表示。</a>
    <div id="stdout"></div>
  </div>
</body>
</html>

実行結果はこちら