Wiki Navigation

Top > 開発ガイド > Spinelzリファレンス > Date Picker

Date Picker

概要

日付選択用カレンダを表示します。

利用方法

<head>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/prototype.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/scriptaculous.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/spinelz_util.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz/datepicker.js"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/datepicker.css" type="text/css">
</head>
<body>
  <div>
    <div id="datepicker"></div>
    <form action="#">
      <input type="text" id="target" />
    </form>
    <button id="trigger">show datapicker</button>
  </div>

  <script type="text/javascript">
    new DatePicker('element', 'target', 'trigger', {format: 'MM/dd/yyyy'});
  </script>
</body>

API

コンストラクタ(sw, content)

引数	説明
element	HTML要素のID。この要素内にがDatePicker?が構築されます。
target	HTML要素のID。選択された日付が入力されます。input(text)タグを指定して下さい。
trigger	HTML要素のID。この要素がクリックされたときにDatePicker?が表示されます。

オプション 第4引数として以下のオプションを指定することができます。オプションを指定するかどうかは任意です。

オプション名	デフォルト値	説明
date	new Date()	初期表示時の日付を指定します。DateまたはObjectで指定します。デフォルト値は今日。
format	DateUtil?.toLocaleDateString	targetに日付を入力するときのフォーマットを、関数または文字列で指定します。（下記「日付のフォーマット」参照」）。デフォルトでは日付を地域表示でフォーマットします。
cssPrefix	'custom_'	カスタムスタイルシートのプレフィックス文字列。
callBack	Prototype.emptyFunction	日付を選択したときに呼ばれる関数。DatePicker?オブジェクトが引数として渡されます。
standBy	false	trueを指定するとtriggerがクリックされた位置にDatePicker?を表示します。
headerFormat	null	DatePicker?のヘッダ部のフォーマットを指定します。例： '#{year}年#{month}月'
dayOfWeek	DateUtil?.dayOfWeek	曜日を表す文字列の配列。デフォルト値は、['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
appendToBody	false	真であれば、elementをbody直下に配置します。
invalidDates	[]	無効な日付の文字列の配列を指定します。targetの値がinvalidDatesの値と一致した場合、DatePicker?は今日の日付でカレンダを表示します。

set

引数	説明
trigger	HTML要素のID。この要素がクリックされたときにDatePicker?が表示されます。
target	HTML要素のID。選択された日付が入力されます。input(text)タグを指定して下さい。
options	HTML要素毎にオプションを指定します。

現在有効なoptionsの値は下記の通りです。（内容はコンストラクタのオプションを参照してください。）
- callBack
- invalidDates
後方互換のため、optionにはFunctionを指定することができます。その場合、指定された関数はcallBackとして扱われます。（「記述例」参照）

記述例

 var datepicker = new DatePicker();

 // 下記二つのサンプルは、同じ挙動をします
 datepicker.set("trigger_id", "target_id", {callBack: function() { alert("callBack!"); }});
 datepicker.set("trigger_id2", "target_id2", function() { alert("callBack!"); });


 // 次のサンプルは、target_id3に0000/00/00が入力されているとき、今日のカレンダが表示されます
 datepicker.set("trigger_id3", "target_id3", {
   callBack:     function() { alert("callBack!"); },
   invalidDates: ["0000/00/00"]
 });

日付のフォーマット

コンストラクタのオプションでformatを指定してください（上記「API」参照）。
関数または文字列を指定できます。

関数を指定

引数には選択された日付がDateオブジェクトとして渡されます。

関数内でフォーマットを行い文字列を返してください。

  new DatePicker('element', 'target', 'trigger', {format: function(date) { return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear(); }});

文字列を指定

yyyy（年）MM（月）dd（日）でフォーマットを指定します。

  new DatePicker('element', 'target', 'trigger', {format: 'MM/dd/yyyy'});

一つのDatePicker?に対して複数のtriggerを設定する

DatePicker?を一つしか生成しないため、生成コストを抑えることができます。
クリックされたtriggerによって、target、callBackが判別され呼び出されます。
setメソッドを利用してtriggerを設定します。

利用方法

<head>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/prototype.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/scriptaculous.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz_lib/spinelz_util.js"></script>
  <script type="text/javascript" src="../src/javascripts/spinelz/datepicker.js"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/datepicker.css" type="text/css">
</head>
<body>
  <div>
    <div id="datepicker"></div>
    <form action="#">
      <input type="text" id="target1" />
      <input type="text" id="target2" />
      <input type="text" id="target3" />
    </form>
    <button id="trigger1">show datapicker</button>
    <button id="trigger2">show datapicker</button>
    <button id="trigger3">show datapicker</button>
  </div>

  <script type="text/javascript">
    var datepicker = new DatePicker('element', null, null, {format: 'MM/dd/yyyy'});
    datepicker.set('trigger1', 'target1', function() { alert('trigger1が押されました。'); });
    datepicker.set('trigger2', 'target2', function() { alert('trigger2が押されました。'); });
    datepicker.set('trigger3', 'target3', function() { alert('trigger3が押されました。'); });
  </script>
</body>

Download in other formats:

Plain Text