日付をプルダウンする方法

誕生日や記念日など、特定の日付を入力するようなフォームを作成する場合に「月」や「日」をプルダウンのリストから選択できるようにすることができます。

(イメージ)

スパイラルのDBを構成する項目として用意されている日付型フィールドはテキスト形式であるため、特にカスタマイズしない限りテキストフィールドで表示されますが、HTMLソースを編集することによってプルダウン形式で表示することができます。

サンプルコード

(※コード内の「date」は対象フィールドの差替えキーワードです)

 年 タグ形式:$差替えキーワード:y[1900-2100]$

<select name="date:y">
  <option value="">--</option>
  <option $date:y1900$ value="1900">1900</option>
  <option $date:y1901$ value="1901">1901</option>
  <option $date:y1902$ value="1902">1902</option>
      :
  <option $date:y2018$ value="2018">2018</option>
</select>

 月 タグ形式:$差替えキーワード:m[1-12]$

<select name="date:m">
  <option value="">--</option>
  <option $date:m1$ value="1">1</option>
  <option $date:m2$ value="2">2</option>
  <option $date:m3$ value="3">3</option>
      :
  <option $date:m12$ value="12">12</option>
</select>

 日 タグ形式:$差替えキーワード:d[1-31]$

<select name="date:d">
  <option value="">--</option>
  <option $date:d1$ value="1">1</option>
  <option $date:d2$ value="2">2</option>
  <option $date:d3$ value="3">3</option>
      :
  <option $date:d31$ value="31">31</option>
</select>

 分 タグ形式:$差替えキーワード:mm[0-59]$

<select name="date:mm">
  <option value="">--</option>
  <option $date:mm0$ value="0">0</option>
  <option $date:mm1$ value="1">1</option>
  <option $date:mm2$ value="2">2</option>
      :
  <option $date:mm59$ value="59">59</option>
</select>

 秒 タグ形式:$差替えキーワード:ss[0-59]$

<select name="date:ss">
  <option value="">--</option>
  <option $date:ss0$ value="0">1</option>
  <option $date:ss1$ value="1">1</option>
  <option $date:ss2$ value="2">2</option>
      :
  <option $date:ss59$ value="59">59</option>
</select>

スマートフォンやタブレットなど、フリック操作による入力をする場合はプルダウン表示にすることで登録時のストレスや時間を大幅に減らすことができます。是非お試しください。