2017-02-13 1 views
-1

캘린더를 만들려고하는데 두 가지 문제가 있습니다.자바 스크립트로 캘린더 만들기 (Html)

  1. 개월은 텍스트로 표시되지 않고 숫자로 표시됩니다.
  2. 개월을 변경하면 날짜도 업데이트되지 않습니다. 개월은 일수가 다르기 때문에 일 선택의 날짜 수는 월 선택의 선택에 따라 업데이트해야합니다.
  3. enter image description here

    일/월/년 형식

.

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

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

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

는 자바 스크립트 코드 : 여기

는 HTML 코드입니다

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); 
    } 
} 
+1

'ID를 === " 하루 "|| "year"가 잘못되었습니다 : id === "day"||이어야합니다. id === "year"' – Pointy

+4

그 작업에 이미 존재하는 플러그인 중 하나를 사용하고 싶지 않습니까? – Dinei

+0

당신은 그 함수에 인자로'this'를 넘겨 줄 필요가 없습니다. 이미 액세스 가능해야합니다. –

답변

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

년도 truthy, 그래서 monthsarray 값으로 간주되지 않습니다. 이 작업을 수행 : 또한

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

당신은 당신은 그것의 가치를 전환 할

switch(SelectObject){ 

싶지 않는 :

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

실수 세 가지

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

감사합니다. 텍스트로 표시되지 않는 달에 관한 문제는 이제 해결되어 SelectObject를 SelectObject.value로 변경해도 불행히도 다른 문제는 해결되지 않았습니다. – David

+0

@David http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript –

+0

나는 SelectObject.selected [SelectObject.selectedIndex] .value와 SelectObject.options [ SelectObject.selectedIndex] .value. 어떤 이유로 작동하지 않지만 스위치 케이스 때문일 수 있습니까? select.add (opi)에서 select.appenChild (opi)로 변경되었습니다. – David

관련 문제