Creating a calendar in Javascript (Html)

Question

I am trying to create a calendar and I have two problems.

The months will not display as text, but rather as numbers.
The days also won't update when I change the months. Months have different amounts of days and thus the amount of days in the days select needs to update based on the choice in the month select.

Day/Month/Year format.

Here is the html code:

<form>
  <select id="day" name="day">
  </select>

  <select id ="month" onchange = "changeDays(this)" name="month" >
  </select>

  <select id="year" name="year">
  </select>
</form>
</div>

Here is the Javascript code:

setCalendar('day',1, 31, false); 
setCalendar('month',1, 12, false); 
setCalendar('year',1910, 2017, false); 

function setCalendar(id, min, max, logic){

if(logic){
removeOptions(id); 
}

var monthsarray = ["January", "February","March" ,"April" ,"May" ,"June" ,"July" ,"August" ,"September", "October", "November" , "December"];  

for  (i = min; i <= max; i++){
select = document.getElementById(id); 
var opti = document.createElement("option"); 
opti.value = i; 
opti.text = id === "day" || "year" ? i.toString() : monthsarray[i-1]; 
select.add(opti); 
}

}


function changeDays(SelectObject){

switch(SelectObject){
case 1: 
//January
 setCalendar('day',1,31,true); 
break; 
case 2: 
//February
 setCalendar('day',1,28,true); 
break; 
case 3:
//March 
 setCalendar('day',1,31,true); 
break; 
case 4:
//April  
 setCalendar('day',1,30,true); 
break; 
case 5:
//May 
 setCalendar('day',1,31,true); 
break; 
case 6: 
//June
 setCalendar('day',1,30,true); 
break; 
case 7: 
//July
 setCalendar('day',1,31,true); 
break; 
case 8:  
//August
 setCalendar('day',1,31,true); 
break;
case 9: 
//September
 setCalendar('day',1,30,true); 
break; 
case 10: 
//October
 setCalendar('day',1,31,true); 
break; 
case 11: 
//November
 setCalendar('day',1,30,true); 
break; 
case 12:  
//December
 setCalendar('day',1,31,true); 
break;  
}

}

function removeOptions(selectObject)
{
    var i;
    for(i = selectObject.options.length - 1 ; i >= 0 ; i--)
    {
        selectObject.remove(i);
    }
}

`id === "day" || "year"` is wrong: should be `id === "day" || id === "year"` — Pointy, Feb 13 '17 at 15:56
Are you sure you don't want to use one of the zillion already existing plugins for that job? — Dinei, Feb 13 '17 at 15:56
You shouldn't need to pass `this` as an argument to that function. It should already be accessible. — Donnie D'Amato, Feb 13 '17 at 15:59
what about leap years? Not hard to find how many days in a specific month and get rid of all of that switch — charlietfl, Feb 13 '17 at 16:02
@charlietfl I could change the switch method to something else if there is a better way (which I am sure there is). If you want to recommend a way please do. I was going to add leap years as well, but I felt the need to fix my mistakes before I continued to work on the calculator. — David, Feb 13 '17 at 16:06
To get #days in given month ... `new Date(year, (monthIndex+1), 0).getDate()` ... https://jsfiddle.net/s90verp5/ — charlietfl, Feb 13 '17 at 16:18

Jonas Wilms · Answer 1 · 2017-02-13T16:17:34.933

1

opti.text = id === "day" || "year" ? i.toString() : monthsarray[i-1];

Year is truthy, so monthsarray will never be taken as value. Do this:

opti.text = id === "day" || id==="year" ? i.toString() : monthsarray[i-1];

Also you dont want

switch(SelectObject){

You want to switch on its value:

switch(SelectObject.options[SelectObject.selectedIndex].value){

Mistake three

select.add(opi) => select.appendChild(opi)

edited Feb 13 '17 at 16:17

answered Feb 13 '17 at 15:56

Jonas Wilms

132,000
20
149
151

Thank you. The issue about the months not displaying as text is now fixed, changing SelectObject to SelectObject.value did not fix the other issue unfortunately. – David Feb 13 '17 at 16:01
@David http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript – Jonas Wilms Feb 13 '17 at 16:05
I tried both SelectObject.selected[SelectObject.selectedIndex].value, and SelectObject.options[SelectObject.selectedIndex].value. Still not working for some reason, but could it be because of my switch cases? I changed from select.add(opi) to select.appenChild(opi). – David Feb 13 '17 at 16:16
No errors. I am using notepad++ unfortunately, and I am going to change that tonight I think. – David Feb 13 '17 at 16:24
@David open in firefox/chrome. Right click. Inspect Element. Console. Has nothing to do with notepad++ ... – Jonas Wilms Feb 13 '17 at 16:25

Creating a calendar in Javascript (Html)

1 Answers1