Preselect Today's Date in Dropdown

Preselecting the current month, day, or year in a dropdown, where appropriate, is a friendly gesture. It expresses an element of elegance.

"Where appropriate" would be in forms where the form user's response likely would be today's date. A start date for a membership or other service period, for example.

The month, the day, and the year are selectable in separate dropdown lists. When the code in this article is implemented, each dropdown has the current month, day, or year selected when the web page loads.

How it Works

PHP is used to determine the current month, day, and year. Each of those date parts are stored in a variable. The variables are used for detecting the current date within the dropdown code.

In each option tag of the dropdowns with a date value is PHP code to detect whether or not that option matches the current date. If yes, the PHP code inserts a selected="selected" attribute.

(PHP gets the date from the server. Thus, the current date is according to the server's time zone.)

As an example, let's suppose the current day is the 26th.

The PHP code stores the number 26 in variable $dropday which is then used in the option tags. Here is a snippet (code for complete dropdowns are further below):

<option value="25" <?php if($dropday==25) { echo('selected="selected"'); } ?> >25</option>
<option value="26" <?php if($dropday==26) { echo('selected="selected"'); } ?> >26</option>
<option value="27" <?php if($dropday==27) { echo('selected="selected"'); } ?> >27</option>

When the PHP code for $dropday==26 comparison is run (the red color, above), the attribute selected="selected" is printed into the option tag because 26 matches the current day.

But when $dropday==25 or $dropday==27 are run (the purple color, above), the attribute won't be printed because 25 and 27 don't match the current day.

The PHP code within the option tag determines whether or not the selected="selected" is printed.

The PHP code doesn't care what the value attribute is, or even if it exists. And it doesn't care what the form user sees as the list item. All it does is insert selected="selected" if the current day is 26.

Thus, any of these are valid:

<option value="26" <?php if($dropday==26) { echo('selected="selected"'); } ?> >26th of the month</option>

<option value="-26-" <?php if($dropday==26) { echo('selected="selected"'); } ?> >26th</option>

<option value="26th" <?php if($dropday==26) { echo('selected="selected"'); } ?> >twenty-six</option>

<option value="twenty-six" <?php if($dropday==26) { echo('selected="selected"'); } ?> >twenty-sixth</option>

<option <?php if($dropday==26) { echo('selected="selected"'); } ?> >26</option>

Notice that the PHP code of each option above is the same. Therefore, whichever option is used in the dropdown, it will be selected when the current day is 26.

PHP does it's magic before the server sends the page to the browser. Therefore, when the page does loads, the dropdowns are pre-selected to the current date.

Example Dropdowns

These three dropdowns are preselected to the current date.

The Source Code

Somewhere above the date dropboxes, put this PHP code:

<?php
list($dropday, $dropmonthname, $dropmonthnumber, $dropyear) = explode( ' ', date('j F n Y') );
?>

The PHP gets the values for four different variables:

• $dropday – The number of the current day.
• $dropmonthname – The name of the current month.
• $dropmonthnumber – The number of the current month.
• $dropyear – The number of the current year.

Both the name and the number of the current month are established. It gives you a choice of which to use.

Here is the code for the day, month, and year dropdowns used in the above example. Comments about the code follow.

<select name="month">
<option value="January"   <?php if($dropmonthname=='January')   { echo('selected="selected"'); } ?> >January</option>
<option value="February"  <?php if($dropmonthname=='February')  { echo('selected="selected"'); } ?> >February</option>
<option value="March"     <?php if($dropmonthname=='March')     { echo('selected="selected"'); } ?> >March</option>
<option value="April"     <?php if($dropmonthname=='April')     { echo('selected="selected"'); } ?> >April</option>
<option value="May"       <?php if($dropmonthname=='May')       { echo('selected="selected"'); } ?> >May</option>
<option value="June"      <?php if($dropmonthname=='June')      { echo('selected="selected"'); } ?> >June</option>
<option value="July"      <?php if($dropmonthname=='July')      { echo('selected="selected"'); } ?> >July</option>
<option value="August"    <?php if($dropmonthname=='August')    { echo('selected="selected"'); } ?> >August</option>
<option value="September" <?php if($dropmonthname=='September') { echo('selected="selected"'); } ?> >September</option>
<option value="October"   <?php if($dropmonthname=='October')   { echo('selected="selected"'); } ?> >October</option>
<option value="November"  <?php if($dropmonthname=='November')  { echo('selected="selected"'); } ?> >November</option>
<option value="December"  <?php if($dropmonthname=='December')  { echo('selected="selected"'); } ?> >December</option>
</select>

<select name="day">
<option value="1"  <?php if($dropday==1)  { echo('selected="selected"'); } ?> >1</option>
<option value="2"  <?php if($dropday==2)  { echo('selected="selected"'); } ?> >2</option>
<option value="3"  <?php if($dropday==3)  { echo('selected="selected"'); } ?> >3</option>
<option value="4"  <?php if($dropday==4)  { echo('selected="selected"'); } ?> >4</option>
<option value="5"  <?php if($dropday==5)  { echo('selected="selected"'); } ?> >5</option>
<option value="6"  <?php if($dropday==6)  { echo('selected="selected"'); } ?> >6</option>
<option value="7"  <?php if($dropday==7)  { echo('selected="selected"'); } ?> >7</option>
<option value="8"  <?php if($dropday==8)  { echo('selected="selected"'); } ?> >8</option>
<option value="9"  <?php if($dropday==9)  { echo('selected="selected"'); } ?> >9</option>
<option value="10" <?php if($dropday==10) { echo('selected="selected"'); } ?> >10</option>
<option value="11" <?php if($dropday==11) { echo('selected="selected"'); } ?> >11</option>
<option value="12" <?php if($dropday==12) { echo('selected="selected"'); } ?> >12</option>
<option value="13" <?php if($dropday==13) { echo('selected="selected"'); } ?> >13</option>
<option value="14" <?php if($dropday==14) { echo('selected="selected"'); } ?> >14</option>
<option value="15" <?php if($dropday==15) { echo('selected="selected"'); } ?> >15</option>
<option value="16" <?php if($dropday==16) { echo('selected="selected"'); } ?> >16</option>
<option value="17" <?php if($dropday==17) { echo('selected="selected"'); } ?> >17</option>
<option value="18" <?php if($dropday==18) { echo('selected="selected"'); } ?> >18</option>
<option value="19" <?php if($dropday==19) { echo('selected="selected"'); } ?> >19</option>
<option value="20" <?php if($dropday==20) { echo('selected="selected"'); } ?> >20</option>
<option value="21" <?php if($dropday==21) { echo('selected="selected"'); } ?> >21</option>
<option value="22" <?php if($dropday==22) { echo('selected="selected"'); } ?> >22</option>
<option value="23" <?php if($dropday==23) { echo('selected="selected"'); } ?> >23</option>
<option value="24" <?php if($dropday==24) { echo('selected="selected"'); } ?> >24</option>
<option value="25" <?php if($dropday==25) { echo('selected="selected"'); } ?> >25</option>
<option value="26" <?php if($dropday==26) { echo('selected="selected"'); } ?> >26</option>
<option value="27" <?php if($dropday==27) { echo('selected="selected"'); } ?> >27</option>
<option value="28" <?php if($dropday==28) { echo('selected="selected"'); } ?> >28</option>
<option value="29" <?php if($dropday==29) { echo('selected="selected"'); } ?> >29</option>
<option value="30" <?php if($dropday==30) { echo('selected="selected"'); } ?> >30</option>
<option value="31" <?php if($dropday==31) { echo('selected="selected"'); } ?> >31</option>
</select>

<select name="year">
<option value="2011" <?php if($dropyear==2011) { echo('selected="selected"'); } ?> >2011</option>
<option value="2012" <?php if($dropyear==2012) { echo('selected="selected"'); } ?> >2012</option>
<option value="2013" <?php if($dropyear==2013) { echo('selected="selected"'); } ?> >2013</option>
<option value="2014" <?php if($dropyear==2014) { echo('selected="selected"'); } ?> >2014</option>
<option value="2015" <?php if($dropyear==2015) { echo('selected="selected"'); } ?> >2015</option>
<option value="2016" <?php if($dropyear==2016) { echo('selected="selected"'); } ?> >2016</option>
<option value="2017" <?php if($dropyear==2017) { echo('selected="selected"'); } ?> >2017</option>
<option value="2018" <?php if($dropyear==2018) { echo('selected="selected"'); } ?> >2018</option>
<option value="2019" <?php if($dropyear==2019) { echo('selected="selected"'); } ?> >2019</option>
<option value="2020" <?php if($dropyear==2020) { echo('selected="selected"'); } ?> >2020</option>
</select>

Notice the PHP code at each option line of the dropdowns source code.

The PHP checks the value of the relevant PHP variable to see if it matches for the current date.

For the month dropdown, it checks the variable $dropmonthname to see if it matches the month name spelled out for the current month. If there is a match, the selected="selected" attribute is inserted into the option field. (Example code for using the month number in the PHP instead of the month name is below.)

For the day dropdown, it checks the variable $dropday to see if it matches the current day. If there is a match, the selected="selected" attribute is inserted into the option field.

For the year dropdown, it checks the variable $dropyear to see if it matches the current year. If there is a match, the selected="selected" attribute is inserted into the option field.

Thus, the correct list item of each dropdown is selected for the current date.

Here is the source code of a month dropdown list using month numbers instead of month names when checking for a match with the current month. It uses $dropmonthnumber when checking for a match.

<select name="month_number">
<option value="1"  <?php if($dropmonthnumber=='1')  { echo('selected="selected"'); } ?> >January</option>
<option value="2"  <?php if($dropmonthnumber=='2')  { echo('selected="selected"'); } ?> >February</option>
<option value="3"  <?php if($dropmonthnumber=='3')  { echo('selected="selected"'); } ?> >March</option>
<option value="4"  <?php if($dropmonthnumber=='4')  { echo('selected="selected"'); } ?> >April</option>
<option value="5"  <?php if($dropmonthnumber=='5')  { echo('selected="selected"'); } ?> >May</option>
<option value="6"  <?php if($dropmonthnumber=='6')  { echo('selected="selected"'); } ?> >June</option>
<option value="7"  <?php if($dropmonthnumber=='7')  { echo('selected="selected"'); } ?> >July</option>
<option value="8"  <?php if($dropmonthnumber=='8')  { echo('selected="selected"'); } ?> >August</option>
<option value="9"  <?php if($dropmonthnumber=='9')  { echo('selected="selected"'); } ?> >September</option>
<option value="10" <?php if($dropmonthnumber=='10') { echo('selected="selected"'); } ?> >October</option>
<option value="11" <?php if($dropmonthnumber=='11') { echo('selected="selected"'); } ?> >November</option>
<option value="12" <?php if($dropmonthnumber=='12') { echo('selected="selected"'); } ?> >December</option>
</select>

To implement the above code, the web page must be a PHP page. Generally, that's a page with a .php file name extension.

Preselecting the current date in a dropdown can be seen as an elegant and friendly gesture.

Will Bontrager