[Solved] Populate select dropdown with correct number of days when select month.

Currently on my modal form. I have 2 select drop down's.

Called year, month.

At the moment for the day I have to type it in.

What I would like to know is how am so that when I select a month it will populate the select day div with the correct number of days because some months shorter than others?

PHP Code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <?php echo form_open('dashboard/calendar');?>
        <div class="modal-content">
              <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Calendar Event</h4>
              </div>
              <div class="modal-body">

            <div class="form-group">
        
                    <select name="year" class="form-control">
            <?php
            $cur_year = date('Y');
            for($year = ($cur_year-10); $year <= ($cur_year+10); $year++) {
                if ($year == $cur_year) {
              echo '<option value="'.$year.'" selected="selected">'.$year.'</option>';
                } else {
                  echo '<option value="'.$year.'">'.$year.'</option>';
                }
            }
            ?>
            <select>
            </div>
            <div class="form-group">
            <select name="month" class="form-control"> 
                <?php

                $monthName = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

                for ($i=0; $i < count($monthName); $i++) {

                    $mn = 1 + $i;

                    if($mn == date('m')) {

                        echo '<option selected value=' . $mn . '>' . $monthName[$i] . '</option>';

                    } else {
                         
             echo '<option value=' . $mn . '>' . $monthName[$i] . '</option>';

                    }

                }

                ?> 

             </select>
            </div>

            <!--

            I currently have to enter day in mannually

            <div class="form-group">
                <select name="day" class="form-control"></select>
            </div>

            -->

            <div class="form-group">
            <input type="text" name="day" class="form-control" placeholder="Enter Day" value="" />
            </div>

            <div class="form-group">
                <textarea name="event" rows="5" class="form-control"></textarea>
            </div>

              </div>
             <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" name="save" class="btn btn-primary" value="Save" />
              </div>
        </div>
        <?php echo form_close();?>
      </div>
</div> 


Attached Files

  modal.php (Size: 2.45 KB / Downloads: 224)

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

What I would like to know is how am so that when I select a month it will populate the select day div with the correct number of days because some months shorter than others?

You could check this:

Code:

month = 1, 3, 5, 7, 8, 10, 12 => 31 days
month = 4, 6, 9, 11 => 30 days
month = 2 => if this year is leaf year => 29 days else 28 days

why not use a date picker? (obviously depends on what you are trying to do)

https://jqueryui.com/datepicker/


If you still need a select with the number of days in the month use

http://php.net/manual/en/function.cal-days-in-month.php

you would need to invoke some sort of a function via ajax each time either the year or month select is changed

you should do this via javascript - it doesn't have much to do with CI, i think
if you use jquery you can try something like this (untested just wrote it down)

Code:

$('select[name="month"]').on("change", function()
{
    var year = $('select[name="year"]').val();
    if (year > 0)
    {
        $('select[name="day"]).find("option").remove();
        var daysInMonth = new Date(year, $(this).val(), 0).getDate();
        for(var i=1; i<=daysInMonth;i++)
        {
            $('select[name="day"]).append($("<option></option>").attr("value",i).text(i);
        }

    }
});

why not use a date picker? (obviously depends on what you are trying to do)

https://jqueryui.com/datepicker/


If you still need a select with the number of days in the month use

http://php.net/manual/en/function.cal-days-in-month.php

you would need to invoke some sort of a function via ajax each time either the year or month select is changed

Date picker Not what I am after.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

you should do this via javascript - it doesn't have much to do with CI, i think
if you use jquery you can try something like this (untested just wrote it down)

Code:

$('select[name="month"]').on("change", function()
{
    var year = $('select[name="year"]').val();
    if (year > 0)
    {
        $('select[name="day"]).find("option").remove();
        var daysInMonth = new Date(year, $(this).val(), 0).getDate();
        for(var i=1; i<=daysInMonth;i++)
        {
            $('select[name="day"]).append($("<option></option>").attr("value",i).text(i);
        }

    }
});

Not work did not display any days.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

no offense but you should've found the typos in the script by yourself

Code:

$('select[name="month"]').on("change", function()
{
    var year = $('select[name="year"]').val();
    if (year > 0)
    {
        $('select[name="day"]').find("option").remove();
        var daysInMonth = new Date(year, $(this).val(), 0).getDate();
        for(var i=1; i<=daysInMonth;i++)
        {
            console.log(i);
            $('select[name="day"]').append($("<option></option>").attr("value",i).text(i));
        }

    }
});

no offense but you should've found the typos in the script by yourself

Code:

$('select[name="month"]').on("change", function()
{
    var year = $('select[name="year"]').val();
    if (year > 0)
    {
        $('select[name="day"]').find("option").remove();
        var daysInMonth = new Date(year, $(this).val(), 0).getDate();
        for(var i=1; i<=daysInMonth;i++)
        {
            console.log(i);
            $('select[name="day"]').append($("<option></option>").attr("value",i).text(i));
        }

    }
});

I did and still did not work.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

no offense but you should've found the typos in the script by yourself

Code:

$('select[name="month"]').on("change", function()
{
    var year = $('select[name="year"]').val();
    if (year > 0)
    {
        $('select[name="day"]').find("option").remove();
        var daysInMonth = new Date(year, $(this).val(), 0).getDate();
        for(var i=1; i<=daysInMonth;i++)
        {
            console.log(i);
            $('select[name="day"]').append($("<option></option>").attr("value",i).text(i));
        }

    }
});

Thank you for help I have had to add

Code:

$( document ).ready(function() {


});

And it worked.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!