locked
Hot to get Month on selected year in dropdown RRS feed

  • 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 .

    Saturday, January 30, 2021 9:48 AM

Answers

  • User503812343 posted

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

    jquery date picker

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 1, 2021 7:17 AM
  • 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"%>" />
    
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 3, 2021 7:25 AM

All replies

  • User475983607 posted

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

    Saturday, January 30, 2021 12:26 PM
  • 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.

    Saturday, January 30, 2021 10:39 PM
  • 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>

    Monday, February 1, 2021 6:33 AM
  • User503812343 posted

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

    jquery date picker

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 1, 2021 7:17 AM
  • 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.

    Monday, February 1, 2021 8:03 AM
  • User1535942433 posted

    Hi mrs.aayushi1@gmail.com,

    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

    Monday, February 1, 2021 9:02 AM
  • 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).

    Monday, February 1, 2021 12:28 PM
  • 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

    Tuesday, February 2, 2021 12:38 AM
  • User1535942433 posted

    Hi mrs.aayushi15@gmail.com,

    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

    Wednesday, February 3, 2021 7:09 AM
  • 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"%>" />
    
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 3, 2021 7:25 AM