CODEWITHSUNDEEP
javascriptjqueryhtmldate
QWERTY
QWERTY

Reputation: 263

onload in select dropdown javascript

I have 3 dropdowns for year, month and day. The dropdown is working properly when I clicked a year, it loads a month and after I choose a month its loads the dates. The problem I encountered is when I choose the year, month and date. for example the date I choose is:

year --> 1990 month-->2 the dates are only 28 days. working properly.

but when I changed to a new year the month is become 1 and the dates still display 28 days it should display 31 days.

I am planning to include a onload in body tag or in select but not works at all. Any suggestions? 

            function daysInMonth(m, y){
               return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
            }

            var monthArray = []; 
            var dateArray = []; 
            function onYearChange() {
                monthArray =[];
                var year = document.getElementById("yeardialog").value
                    if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                        for(var i = 0; i < monthArray.length; i++) {
                            var monthOptions = monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
            		console.log(monthArray);
    			}   
    		}

            function onMonthChange(){	
                if(dateArray.length>12){
                    dateArray.splice(0, 12);
                }
                var dates =[]; 
                var month = document.getElementById("monthdialog").value;
                var endDay = dateArray[month.replace('', '')-1];

                for(var date = 1; date<=endDay; date++){
                    dates.push(date + '');
                }

                var select = document.getElementById("datedialog");
                select.innerHTML = "";

                for(var i = 0; i < dates.length; i++) {
                    var dateOptions = dates[i].replace('', '');
                    var el = document.createElement("option");
                        el.textContent = dateOptions + '';

                    if(dateOptions<10){
                        dateOptions = '0'+dateOptions
                    }
                    el.value = dateOptions;
                    select.appendChild(el);
                }
            }
<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

I want to solve it today.

Upvotes: 0

Views: 2637

Answers (3)

Rashedul.Rubel
Rashedul.Rubel

Reputation: 3584

 function onYearChange() {

            monthArray =[];
            var year = document.getElementById("yeardialog").value
            if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                for(var i = 0; i < monthArray.length; i++) {
                 var monthOptions =monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
                    console.log(monthArray);
                }
                onMonthChange();
            }

call `onMonthChange();` function inside `onYearChange();`

because date will be loaded on month change. since year change does not trigger month change event that's why date dropdown was not loading.

Upvotes: 0

Saravanan Arunagiri
Saravanan Arunagiri

Reputation: 595

function daysInMonth(m, y){
               return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
            }

            var monthArray = []; 
            var dateArray = []; 
            function onYearChange() {
                monthArray =[];
                var year = document.getElementById("yeardialog").value
                    if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                        for(var i = 0; i < monthArray.length; i++) {
                            var monthOptions = monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
                      onMonthChange();
            		console.log(monthArray);
    			}   
    		}

            function onMonthChange(){	
                if(dateArray.length>12){
                    dateArray.splice(0, 12);
                }
                var dates =[]; 
                var month = document.getElementById("monthdialog").value;
                var endDay = dateArray[month.replace('', '')-1];

                for(var date = 1; date<=endDay; date++){
                    dates.push(date + '');
                }

                var select = document.getElementById("datedialog");
                select.innerHTML = "";

                for(var i = 0; i < dates.length; i++) {
                    var dateOptions = dates[i].replace('', '');
                    var el = document.createElement("option");
                        el.textContent = dateOptions + '';

                    if(dateOptions<10){
                        dateOptions = '0'+dateOptions
                    }
                    el.value = dateOptions;
                    select.appendChild(el);
                }
            }
<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

Upvotes: 1

Solutionswithus
Solutionswithus

Reputation: 149

Simply add the onMonthChange() after onYearChange() in year drop down. It will work.

Upvotes: 1

Related Questions