/bonvhp/webapp/Smarty       [後へ]   [目次へ]   [次へ] ~ [] ~

Smarty: html_select_date

●日付の設定

html_select_date を使うと、
簡単に日付を設定するフォームが作れます。

{html_select_date time=デフォルトの年月日 
 start_year=開始年 end_year=終了年 field_separator=区切り文字 
 field_order=年月日の並び順
 month_format=月のフォーマット}

・time
  表示時点で選択しておく年月日を
  Unix タイムスタンプか、'YYYY-MM-DD' フォーマットで指定します。
  省略すると、年月日、それぞれリストの最初になります。

・start_year
  年のリストの開始を指定します。
  -3 などと指定すると、現在から3年前の年を指定した事になります。
  省略すると、現在の年になります。

・end_year
  年のリストの終了を指定します。
  +2 などと指定すると、現在から2年後の年を指定した事になります。
  省略すると、現在の年になります。

・field_separator
  年、月、日、それぞれの間に挿入する文字を指定します。
  省略すると、'\n' になります。

・field_order
  年月日の並び順を指定します。
  月を M、日を D、年を Y として、3文字で表記します。
  省略すると、MDY になります。

・month_format
  月のリストのフォーマットを指定します。
  PHP の strftime 関数の書式を参照してください。
  省略すると、'%B' になります。

例えば、

sample.tpl で、
{html_select_date} とすると、見た目は、

{html_select_date time='2011-01-01' field_order=YMD}
とすると、見た目は、

{html_select_date start_year='-3' end_year='+3'
 field_separator='/'  field_order=YMD month_format='%m'}
とすると、見た目は、
//

注意が必要なのは、
この関数は、
あくまでプルダウンメニューの HTML を展開するだけだ、ということです。
2月31日と選んでも、そのまま submit するので、
日時の妥当性は、別途プログラムでチェックする必要があります。

日付の妥当性をチェックするのに一番簡単なのは、 PHP の checkdate 関数を用いる事です。 # bool checkdate ( int $month , int $day , int $year ) ですが、これだと、 フォームを送信した後でないとチェックできません。 2月31日とか指定されたとき、 入力済みの他のデータを保ったままデータ入力画面に戻るのは、 コード的に面倒ですし、 何より、ユーザーに優しくありません。 そこで、送信する前に HTML 内部の JavaScript でチェックし、 NG なら送信させないようにするのが妥当です。 例えば、以下のようにします。
<html> <head> <meta http-equiv="Content-Script-Type" content="JavaScript" /> <script type="text/javascript"> <!-- function checkDate(year_name, month_name, day_name) { // html_select_date 展開後の select の名前からオブジェクトを取得する // 同じ name が複数無い前提。 var year_id = document.getElementsByName(year_name).item(0); var month_id = document.getElementsByName(month_name).item(0); var day_id = document.getElementsByName(day_name).item(0); // 現在選択されている設定値を取り出す // parseInt するのは、09 などの値が8進数に間違われないように、念のため var year = parseInt(year_id.options[year_id.selectedIndex].value, 10); var month = parseInt(month_id.options[month_id.selectedIndex].value, 10)-1; // JavaScript の月は 0 始まり var day = parseInt(day_id.options[day_id.selectedIndex].value, 10); // 範囲が正しいか調べる if(year>=0 && month>=0 && month<=11 && day>=1 && day<=31) { // 一旦 JavaScript で日付を生成させてから、再度分解し、元の値と比べる var date = new Date(year, month, day); if(date.getFullYear()==year && date.getMonth()==month && date.getDate()==day) { return true; } } // 範囲が正しくなければメッセージを出して false で返す (submit させない) alert("Invalid Date!!"); // 実際の文字列は適切なものを選んでください。 return false; } // --> </script> </head> <body> <form method="post"> {html_select_date start_year='-3' end_year='+3' field_separator='/' field_order=YMD month_format='%m'} <input type="submit" onClick="return checkDate('Date_Year', 'Date_Month', 'Date_Day')"> </form> </body> </html>
/bonvhp/webapp/Smarty       [後へ]   [目次へ]   [次へ]