Getting the number of days from the selected month in a form

TeddyKiller · April 13, 2010

Two drop down select menu's.

Ones the month.

Ones the days.

This may need javascript, though not sure. How would I populate the number of days in the select menu, based upon users selection of month. I have it as simple as this at the moment.

echo '<select name="event_time_mo">';
        $month = array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
        foreach($month as $m) {
            echo "<option value=\"$m\">$m</option>";
        }
        echo '</select> , 
        <select name="event_time_hh">';
        for ($x=1; $x <= 24; $x++) {
            echo "<option value=\"$x\">$x</option>";
        }
        echo '</select>';

Can you help? cheers

teamatomic · April 13, 2010

Without doing a complete page refresh you would have to use js/ajax. To get the number of days use cal_days_in_month.

HTH

Teamatomic

Psycho · April 13, 2010

[Moving to JavaScript forum]

You will need the year as well otherwise you have to populate 29 for Februrary even when it is not valid. And, if you do that, what's the point of doing this at all?

Don't see why you would need/want to use AJAX as the logic can be handled in JS just fine.

Sample code

<html>
<head>

<script type="text/javascript">

function daysInMonth(month, year)
{
  var days = 31;
  if (month == 2) { days=((year%4==0 && (year%100!=0 || year%400==0)))?'29':'28'; }
  else if (month==4 || month==6 || month==9 || month==11) { days = 30; }

  return days;
}

function setDays()
{
    var dayObj = document.getElementById('day');
    var month  = document.getElementById('month').value;
    var year   = document.getElementById('year').value;
    var dayIdx = dayObj.options.selectedIndex;
    var days   = daysInMonth(month, year);

    //No chance in days
    if(dayObj.options.length==days) { return; }

    //Too many days, remove some
    if(dayObj.options.length>days)
    {
        dayObj.options.length = days;
        if (dayIdx < days)
        {
            dayObj.options.selectedIndex = dayIdx;
        }
        return;
    }

    //Not enough days, add some
    while(dayObj.options.length<days)
    {
        dayNo = (dayObj.options.length + 1);
        dayObj.options[dayObj.options.length] = new Option(dayNo, dayNo);
    }
    return;
}

</script>

</head>

<body>
Month: 
<select name="month" id="month" onchange="setDays();">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select><br />

Day: 
<select name="day" id="day">
  <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>
  <option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
  <option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option>
  <option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
  <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option>
  <option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option>
  <option value="31">31</option>
</select><br />

Year:
<select name="year" id="year" onchange="setDays();">
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select><br />

</body>
</html>

TeddyKiller · April 13, 2010

Does the job Cheers. Yeah I thought about it needing the year too. I completely forgot about leaps. It's a shame there is no possible way to do it with a for loop is there? That'd of made the code easier. but nevermind.

Psycho · April 13, 2010

It's a shame there is no possible way to do it with a for loop is there?

Huh? Not sure what you mean. I guese the code be compacted a little more, but I chose to leave it more compartmentalized. Plus, I added some "nice to have" functionality to ensure theday didn't change when the list length changes.

Here' a quick rewrite that shortens the code

function setDays()
{
    var dayObj = document.getElementById('day');
    var month  = document.getElementById('month').value;
    var year   = document.getElementById('year').value;
    var days   = daysInMonth(month, year);

    while(dayObj.options.length!=days)
    {
        if(dayObj.options.length>days)
        {
            dayObj.options.length = days;
        }
        dayNo = (dayObj.options.length + 1);
        dayObj.options[dayNo-1] = new Option(dayNo, dayNo);
    }
    return;
}

Sign In

Getting the number of days from the selected month in a form

Recommended Posts

TeddyKiller

Link to comment

Share on other sites

teamatomic

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

TeddyKiller

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information