0
드롭 다운 달력을 만들려고합니다. jquery가 없습니다! 순수한 자바 스크립트. 지금까지 @rlemon은 나에게 큰 도움을 주었고 나는 그가 나를 도왔던 코드를 만들 수 있었다. 나는 거의 끝났지 만 몇 가지 작은 문제가 있습니다. 지금까지 모든 것이 올바르게 작동하지만 지금은 문제가있는 윤년을 통합하려고합니다. 선택한 현재 연도를 결정하는 데 문제가 있습니다. 나는 가지고있는자바 스크립트 드롭 다운 기능
sel_year.onchange = recalculateDays2(this);
내가 선택한 현재 연도의 가치를 전달하고 있다고 생각합니다. 사용자가 올해로 변경되면 다음 함수 recalculateDays2에 내가 생각되는 변수
year_index = x.text;
을 만드는 오전은 year_index = 2011, 2012 등 내가 29 2 월 일을 설정할 수있는 기능 recalculateDays2를 원하는 같은 것을 할 수 2012 도와주세요 ... 년은 윤년이 코드에이 프로토 타입을하는 것입니다 경우
<html>
<head>
</head>
<body>
Calendar<br>
<hr align="left" width="200px"/>
--Year ------ Month ----- Day<br>
<div id="calendar-container"></div>
<script type="text/javascript">
(function() {
var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014;
var years = [yr1, yr2, yr3, yr4];
var calendar = [
["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],["October", 31],["November", 30],["December", 31]],
//this is the variable that accesses the content
cont = document.getElementById('calendar-container');
//creates the variables for the drop downs
var sel_year = document.createElement('select'), sel_month = document.createElement('select'), sel_day = document.createElement('select');
function createOption(txt, val) {
//this creates the option but it seems that it is making the value -1 than what the text node is
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(txt));
return option;
}
function createYearOption(val) {
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(val));
return option;
}
//this clears any elements for days, months, years
function clearChildren(ele) {
while (ele.hasChildNodes()) {
ele.removeChild(ele.lastChild);
}
}
//this function is only triggered when you recalculate the months
function recalculateDays() {
var month_index = sel_month.value,
df = document.createDocumentFragment();
//l is the variable for the number of days in the month from the array above ex:28, 30, 31
for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i));
}
clearChildren(sel_day);
sel_day.appendChild(df);
}
//this function is triggered only when you change the year
function recalculateDays2(x) {
var month_index = sel_month.value,
df = document.createDocumentFragment(),
year_index = x.text;
//this checks to see if the month selected is Feb
if ((month_index == 1) && (year_index == 2012)) {
//l is the variable for the number of days in the month from the array above ex:28, 30, 31
for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i));
}
clearChildren(sel_day);
sel_day.appendChild(df);
} else {}}
function generateMonths() {
var df = document.createDocumentFragment();
calendar.forEach(function(info, i) {
df.appendChild(createOption(info[0], i));
});
//clears past months
clearChildren(sel_month);
//appends new months onto variable df
sel_month.appendChild(df);
}
function generateYears() {
var df = document.createDocumentFragment();
years.forEach(function(i) {
df.appendChild(createYearOption(i));
});
//clears past months
clearChildren(sel_year);
//appends new months onto variable df
sel_year.appendChild(df);
}
//anytime the month selector is changed this calls the function to change the days
sel_month.onchange = recalculateDays;
sel_year.onchange = recalculateDays2(this);
//i believe this automatically runs the months and days functions specifically for when first loading the page
generateMonths();
recalculateDays();
generateYears();
//this is what displays each of the individual drop downs after everything has been done to them
cont.appendChild(sel_year);
cont.appendChild(sel_month);
cont.appendChild(sel_day);
}());
</script>
</body>
</html>