前に、生年月日とかの日付をセレクトボックスにするか記入式にするか悩んだという日記を書きましたが、僕は記入式+カレンダーで選択できる機能というようにしました。(メインユーザーの特性にもよるけど)。
が、これはPCサイトの話で、カレンダーのやつはJavascriptで動くため携帯では使えない。
なので、携帯だとやっぱり選択式かなあと考え、selectを使うことにした。
が、これはPCサイトの話で、カレンダーのやつはJavascriptで動くため携帯では使えない。
なので、携帯だとやっぱり選択式かなあと考え、selectを使うことにした。
そうと決まれば後はいかに開発側の工夫なので、とりあえず、Smartyに日付を扱う機能はないかな、と思ったらあった。html_select_dateという。
<{html_select_date prefix="reservation" field_separator="/" year_empty="----" day_empty="--" month_empty="--" start_year="+0" end_year="+3" field_order="YMD" month_format="%m" time="$default" }>
これ1つで年、月、日の3つのselectタグを生成してくれる。
それぞれのオプションの意味は上記リンクを参照。
結果、こんな感じになる。
<select name="reservationYear">ソースがすっきりして実に気持ちがいい。
<option label="----" value="">----</option>
<option label="2009" value="2009">2009</option>
<option label="2010" value="2010">2010</option>
<option label="2011" value="2011">2011</option>
<option label="2012" value="2012">2012</option>
</select>/<select name="reservationMonth">
<option label="--" value="" selected="selected">--</option>
<option label="01" value="01">01</option>
<option label="02" value="02">02</option>
<option label="03" value="03">03</option>
<option label="04" value="04">04</option>
<option label="05" value="05">05</option>
<option label="06" value="06">06</option>
<option label="07" value="07">07</option>
<option label="08" value="08">08</option>
<option label="09" value="09">09</option>
<option label="10" value="10">10</option>
<option label="11" value="11">11</option>
<option label="12" value="12">12</option>
</select>/<select name="reservationDay">
<option label="--" value="">--</option>
<option label="01" value="1">01</option>
<option label="02" value="2">02</option>
<option label="03" value="3">03</option>
<option label="04" value="4">04</option>
<option label="05" value="5">05</option>
<option label="06" value="6">06</option>
<option label="07" value="7">07</option>
<option label="08" value="8">08</option>
<option label="09" value="9">09</option>
<option label="10" value="10">10</option>
<option label="11" value="11">11</option>
<option label="12" value="12">12</option>
<option label="13" value="13">13</option>
<option label="14" value="14">14</option>
<option label="15" value="15">15</option>
<option label="16" value="16">16</option>
<option label="17" value="17">17</option>
<option label="18" value="18">18</option>
<option label="19" value="19">19</option>
<option label="20" value="20">20</option>
<option label="21" value="21">21</option>
<option label="22" value="22">22</option>
<option label="23" value="23">23</option>
<option label="24" value="24">24</option>
<option label="25" value="25">25</option>
<option label="26" value="26">26</option>
<option label="27" value="27">27</option>
<option label="28" value="28">28</option>
<option label="29" value="29">29</option>
<option label="30" value="30">30</option>
<option label="31" value="31">31</option>
</select>
コメントする