webシステムなどを作成しているとセレクトボックスで利用者に項目を選んでもらうことがよくあります。
その際に初期値を動的に設定する方法になります。
今回はphpを使った設定方法になります。
まずはhtmlタグでセレクトボックスを作成する
まずは普通にhtmlだけでセレクトボックスを作成します。
<select name="hoge">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
・
・
・
<option value="31">31</option>
</select>
簡単にフォームを作成する場合このように31日分の項目を作成すると思います。
この場合に利用者がセレクトボックスを開くと毎回1から開く為、今日の日付をわざわざ選ばないといけなくなります。
なので今回はphpを使って今日の日付を選択済みにする方法になります。
for分を使い31日分の項目を作る
ではphpにて初期値を設定するのですが、まずは先ほどのコードをfor文を使い動的に生成できるようにしておきます。
そうすることによって31日分optionタグを書いていたのが短く書けますし、初期値の設定をやりやすくなります。
<select>
<?php for ($date = 1; $date <= 31; $date++) : ?>
<option value="<?= $date; ?>"><?= $date; ?></option>
<?php endfor; ?>
</select>
これで31までの項目が作成できました。
ではphpをつかって初期値を設定していきます
まずは今日の日付をphpで取得します。
date関数を使っていきます。
date('d')
これで今日の日付を取得することができます。
date関数では日付や時刻などを取得することができます。
例えばこのように書くと
date('Y-m-d')
2023-05-4
のように取得ができます。
なぜYだけが大文字かというと小文字にすると下二桁のみを取得しますので
date('y-m-d')
だと
23-05-4となります。
また月に関しては二桁になる様に0埋めとよばれるものが発生します。
なので1月から9月までは先頭に0がついて表示されます。
日付に関しては0埋めされずに1桁台は1桁で表示されます。
今回は日付だけなので0埋めを気にせずに取得してこれます。
初期値を設定する
では今日の日付を取得しセレクトボックスの初期値を設定していきましょう。
先ほど取得した日にちを使いif文を使っていきます。
該当の日付が来た際にoptionタグにselectedをつけるようにコードを作成していきます。
<select name="date">
<?php for ($date = 1; $date <= 31; $date++) : ?>
<?php if (date('d') == $date) : ?>
<option value="<?= $date; ?>" selected><?= $date; ?></option>
<?php else : ?>
<option value="<?= $date; ?>"><?= $date; ?></option>
<?php endif; ?>
<?php endfor; ?>
</select>
先ほど作成したfor文の中でif文を使い今日の日付が来たときだけoptionタグにselectedをつけるようにします。
これで今日の日付を初期値に設定することができました。
この方法を使えば日付だけでなく様々な動的に変化する値を初期値に設定することができます。
ちなみにこのようにしてif文を1行で書くこともできます。
<select name="date">
<?php for ($date = 1; $date <= 31; $date++) : ?>
<option value="<?= $date; ?>" <?= (date('d') == $date) ? "selected" : ""; ?>><?= $date; ?></option>
<?php endfor; ?>
</select>
<?= は <?php echo を省略したものになります。
こうすることによって少し短く書けますが、それでも1行で書くと横に長くなり見づらくなるので
状況に応じて使うのが良いでしょう。
まとめ
今回は友人が休暇届をサーバ上で作成できるように作ったシステムの中で
今日の日付を初期値にする方法が分からないとのことで、記事を作成してみました。
date関数はシステムを作る際によく使う関数になりますので覚えておいてくださいね。
0埋めのパディング問題もその内ひっかかると思うので、また記事を作成したいと思います。
コメント