« セッション対応β版の公開 | トップページ | 「連絡先管理」のスクリプト »

2007/11/07

日付用フォームの作成

HTMLで日付を入力するのは多少面倒です。
テキストボックスに日付を入れてもらうか、それともSELECTフォームで選択してもらうかのどちらかが一般的だと思われますが、テキストボックスに入力する方法はちょっと癖があります。それは、入力する人がどんな文字列を入力するかわからないという部分です。
ということで、僕は日付の操作はなるべくSELECTフォームを用意するようにしています。

ここでSELECTフォームの仕様は、年月日をそれぞれのSELECTフォームで選択するというもので、以下の関数で生成させることにします。

def make_date_form(name, default, year, span)
  
  val_y = []
  val_m = []
  val_d = []
  
  year.upto(year+span) { |y|
    val_y[y] = y
  }
  
  1.upto(12) { |m|
    val_m[m] = m
  }
  
  1.upto(31) { |d|
    val_d[d] = d
  }
  
  html  = make_select_form_without_key(
    name + "_y", val_y, default.year) + "年"
  html += make_select_form_without_key(
    name + "_m", val_m, default.month) + "月"
  html += make_select_form_without_key(
    name + "_d", val_d, default.day) + "日"
  return html
  
end

ここで、make_select_form_without_key関数は以下のように定義します。

def make_select_form_without_key(name, values, default)
  
  html = ""
  flg = false
  
  values.each { |val|
    if val != nil then
      if val == default then
        opt = " selected"
        flg = true
      else
        opt = ""
      end
      html += <<EOF
<option value='#{CGI.escapeHTML(val.to_s)}'#{opt}>
  #{CGI.escapeHTML(val.to_s)}
</option>\n
EOF
    end
  }
  
  if !flg then
    html += <<EOF
<option value='#{CGI.escapeHTML(default.to_s)}' selected>
  #{CGI.escapeHTML(default.to_s)}
</option>\n
EOF
  
  end
  
  html = "<select name='#{name}'>#{html}</select>"
  
  return html
  
end

これでフォームを表示する関数が出来上がり。
今度はこのフォームで送られた日付を受け取る関数が必要です。それは以下となります。

def get_date_from_form(name, values)
  
  y = values["#{name}_y"]
  m = values["#{name}_m"]
  d = values["#{name}_d"]
  
  begin
    t = Date.new(y.to_i, m.to_i, d.to_i)
  rescue
    t = Date.today()
  end
  
  values.delete(name + '_y')
  values.delete(name + '_m')
  values.delete(name + '_d')
  
  return t
  
end

これで年月日がばらばらに送られてきた日付情報を結合し、日付に戻す事ができます。
これを利用して、書籍情報に購入日を追加する機能を作ってみました。

サンプルサイト

いつものようにソースコードは以下のリンクからダウンロードできます。

「framework6.zip」をダウンロード

まだちょっと説明不十分な気がしますが、自分のためにもそのうちきちんとドキュメントを整備していきたいと思います。

|

« セッション対応β版の公開 | トップページ | 「連絡先管理」のスクリプト »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/79953/17008361

この記事へのトラックバック一覧です: 日付用フォームの作成:

« セッション対応β版の公開 | トップページ | 「連絡先管理」のスクリプト »