Top > 開発ガイド > コンポーネント開発逆引きリファレンス > 日付選択用カレンダを表示する(datePicker)

日付選択用カレンダを表示する(datePicker)

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

Spinelzの日付選択用カレンダDate Pickerを表示します。
多言語対応済みのDate Pickerを使用することができます。

イメージ

使い方

ビューでrubricks.common.datepicker.setを呼び出します。

<script type="text/javascript">
  rubricks.common.datepicker.set(
    'datepicker_fault_filter_complete_to',
    'filter_complete_on_to', {standBy: true});
</script>

補足

Date Pickerを新たに生成する場合は下記のように記述します。
（この方法は、画面表示が遅くなるなどパフォーマンスに影響がありますので推奨しておりません）

ビューでヘルパdate_picker_elementを呼び出します。

• 利用例：

    <%= date_picker_element('element', 'target', 'trigger', {:callBack => "function() { alert(0); }"}) %>
  

これによって以下のJavaScriptが出力されます。

• 多言語対応のために'dayOfWeek', 'headerFormat', 'format'オプションが自動的に指定されます。
• 上記「利用例」は下記のようにJavaScriptを直接記述することと同等です。

  <script type="text/javascript">
    new DatePicker('element', 'target', 'trigger', 
      {
        headerFormat => "<%= hl('[_Common_YearMonth_Format_String]') %>",
        format: "<%= hl('[_Common_DatePicker_Format_String]') %>",
        dayOfWeek: [
          "<%= hl('[_Common_Sunday]') %>",
          "<%= hl('[_Common_Monday]') %>",
          "<%= hl('[_Common_Tuesday]') %>",
          "<%= hl('[_Common_Wednesday]') %>",
          "<%= hl('[_Common_Thursday]') %>",
          "<%= hl('[_Common_Friday]') %>",
          "<%= hl('[_Common_Saturday]') %>"
        ],
        callBack: function() { alert(0); }
      }
    );
  </script>

関連項目

• Date Picker

API

rubricks.common.datepicker.set(trigger, target, options={})

• あらかじめ生成済みのDate Pickerに値を設定します。

引数	必須	初期値	型	説明
trigger	○	-	String	HTML要素のID。この要素がクリックされたときにDate Pickerが表示されます。
target	○	-	String	HTML要素のID。選択された日付が入力されます。input(text)タグを指定して下さい。
options	-	-	Hash	Date Pickerと同じ。Date Pickerを参照してください。

date_picker_element(element, target, trigger, options = {}, with_script_tag = true)

• SpinelzのDate Pickerを構築します。

引数	必須	初期値	型	説明
element	○	-	String	HTML要素のID。この要素内にがDate Pickerが構築されます。
target	○	-	String	HTML要素のID。選択された日付が入力されます。input(text)タグを指定して下さい。
trigger	○	-	String	HTML要素のID。この要素がクリックされたときにDate Pickerが表示されます。
options	-	-	Hash	Date Pickerと同じ。Date Pickerを参照してください。
with_script_tag	-	true	boolean	スクリプトタグを出力するかどうか。デフォルトでは出力します。