Hot to get Month on selected year in dropdown

Question

User-183162800 posted

Hi!

I have two dropdown named drpYear and drpMonth. I am populating 2020 and current year(2021) in drpYear. My requirement is If i select

2020 year then all month display in drpMonth dropdown and if select 2021 current year then only show January month in drpMonth dropdown.

Kindly provide me solution in Asp.net format. It would be appreciable .

Answer 1

User475983607 posted

This is a fairly basic programming problem.  Can you share the code you're designed up to this point?

Answer 2

User-1545767719 posted

2020 year then all month display in drpMonth dropdown and if select 2021 current year then only show January month in drpMonth dropdown.

Have you condidered DateTime.Now property? You can obtain the values of year and month at the time the property is used. Then you will be able to set the DropDownLists using the values.

Answer 3

User-183162800 posted

for (int i = 2020; i <= DateTime.Now.Year; i++)          {                drpYear.Items.Add(new ListItem("" + i, "" + i));            }

The above code is to bind year in the dropdown(drpYear)

The below is design: <div class="card-deck" style=" background-color:khaki;box-shadow:-2px -2px 3px gray;margin-top:3px">
            <div class="card-body" style="width:33%">Year<span style="font-weight:bold;color:red">*</span> &nbsp;&nbsp;&nbsp<asp:DropDownList ID="drpYear" CssClass="rounded-lg" runat="server" AutoPostBack="true" >
                                                                            <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
                                                                           </asp:DropDownList></div>
            <div class="card-body" style="width:33%">Month<span style="font-weight:bold;color:red">*</span> &nbsp;&nbsp;&nbsp<asp:DropDownList ID="drpMonth" CssClass="rounded-lg" runat="server" AutoPostBack="true" >
                                                                            <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
                                                                            <asp:ListItem Text="Jan" Value="1"></asp:ListItem>
                                                                            <asp:ListItem Text="Feb" Value="2"></asp:ListItem>
                                                                            <asp:ListItem Text="March" Value="3"></asp:ListItem>
                                                                            <asp:ListItem Text="April" Value="4"></asp:ListItem>
                                                                            <asp:ListItem Text="May" Value="5"></asp:ListItem>
                                                                            <asp:ListItem Text="June" Value="6"></asp:ListItem>
                                                                            <asp:ListItem Text="July" Value="7"></asp:ListItem>
                                                                            <asp:ListItem Text="Aug" Value="8"></asp:ListItem>
                                                                            <asp:ListItem Text="Sep" Value="9"></asp:ListItem>
                                                                            <asp:ListItem Text="Oct" Value="10"></asp:ListItem>
                                                                            <asp:ListItem Text="Nov" Value="11"></asp:ListItem>
                                                                            <asp:ListItem Text="Dec" Value="12"></asp:ListItem>
                                                                            </asp:DropDownList></div>
            <div class="card-body" style="width:34%">Project Name<span style="font-weight:bold;color:red">*</span> &nbsp;&nbsp;&nbsp<asp:DropDownList ID="drpProject" AutoPostBack="true" CssClass="rounded-lg" runat="server" OnSelectedIndexChanged="drpProject_SelectedIndexChanged">
                                                                                                                                        <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
                                                                                                                                    </asp:DropDownList></div>
            
            
        </div></div>

Answer 4

User503812343 posted

why are you using DropDown for this? you can use jQuery DatePicker and configure to set specific values.

https://geeksarray.com/blog/jquery-ui-datepicker-examples-in-mvc

Answer 5

User-1545767719 posted

for (int i = 2020; i <= DateTime.Now.Year; i++)          {                drpYear.Items.Add(new ListItem("" + i, "" + i));            }

The above code is to bind year in the dropdown(drpYear)

Are you saying that you could achieve your purpose mentioned in this thread? If so please close this thread. If not and you still have question please write it.

Answer 6

User1535942433 posted

Hi [e-mail],

Do you must use dropdownlists? As far as I think,the best way is to use the bootstrap datepicker. It's more simple and population. And you only need to set endDate.

Note, you need to add jquery and bootatrap js and css.

Just like this:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link href="Content/bootstrap-datepicker3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-datepicker.min.js"></script>

 <input id="datepicker" width="270" />
        <script>
            $('#datepicker').datepicker({
                endDate: new Date(new Date().setDate(new Date().getDate()))
            });
        </script>

More details,you could refer to below articles:

Jquery:

https://www.w3schools.com/jquery/jquery_get_started.asp

Bootstrap:

https://getbootstrap.com/

Bootstrap datepicker:

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

Best regards,

Yijing Sun

Answer 7

User-183162800 posted

I can populate the year, but my requirement is if i select 2020 then in month dropdown must be display all 12 months. if select 2021 then should display only january month in drpMonth(dropdown).

Answer 8

User-1545767719 posted

I can populate the year, but my requirement is if i select 2020 then in month dropdown must be display all 12 months. if select 2021 then should display only january month in drpMonth(dropdown).

Try below:

(1) set the AutoPostBack property of the year DropDownList to ture,

(2) attach the event handler to the SelectedIndexChanged event,

(3) create the ListItems as required (if today is 2021/2/2, January and February ListItems) in the event handler, and

(4) add the ListItems created in step (3) above to the month DropDownList.

Or consider using the CascadingDropDown of Ajax Control Toolkit if you want to avoid that the PostBack occurs every time the selected item in the year DropDownList changes.

https://ajaxcontroltoolkit.devexpress.com/CascadingDropDown/CascadingDropDown.aspx

Answer 9

User1535942433 posted

Hi [e-mail],

Do you care jquery? I suggest you could use jquery to filter the data.Just like this:

<script src="Scripts/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var monthNames = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
            if ($('#drpYear option:selected').text() == new Date().getFullYear()) {
                var month = (new Date()).getMonth();
                for (var i = 0; i < monthNames.length; i++) {
                    if (i<=month) {
                        $('#drpMonth').append('<option>' + monthNames[i] + '</option>');
                    }
                }
            }
            else {
                for (var i = 0; i < monthNames.length; i++) {
                    $('#drpMonth').append('<option>' + monthNames[i] + '</option>');
                }
            }
        })
    </script>
<div class="card-body" style="width: 33%">
            Year<span style="font-weight: bold; color: red">*</span> &nbsp;&nbsp;&nbsp<asp:DropDownList ID="drpYear" CssClass="rounded-lg" runat="server" AutoPostBack="true">
                <asp:ListItem Text="--Select--" Value="0"> 
                </asp:ListItem>
            </asp:DropDownList>
        </div>
        <div class="card-body" style="width: 33%">
            Month<span style="font-weight: bold; color: red">*</span> &nbsp;&nbsp;&nbsp<asp:DropDownList ID="drpMonth" CssClass="rounded-lg" runat="server" AutoPostBack="true">
                <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
            </asp:DropDownList>
        </div>

Code-Behind:

DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("YT", typeof(Int32)));
            dt.Columns.Add(new DataColumn("YV", typeof(Int32)));
            dt.Rows.Add("2020", "1");
            dt.Rows.Add("2021", "2");
            if (!IsPostBack)
            {
                drpYear.DataTextField = "YT";
                drpYear.DataValueField = "YV";
                drpYear.DataSource = dt;
                drpYear.DataBind();
            }

Best regards,

Yijing Sun

Answer 10

User-821857111 posted

All these dropdown lists and third party date pickers are fine, but if your users are using Edge, Chrome or Opera, you can use the browser's native input type="month". If you only want the user to be able to select up to the last full month in the current year, you can set a value for the max attribute:

<input type="month" value="<%=DateTime.Now.AddMonths(-1).ToString("yyyy-MM") %>" max="<%=DateTime.Now.AddMonths(-1).ToString("yyyy-MM") %>" />