0
J'essaie de créer un calendrier déroulant. Pas de jquery! Javascript pur. Jusqu'à présent @rlemon m'a fourni une aide précieuse et j'ai pu construire du code avec lequel il m'a aidé. J'ai presque fini, mais j'ai quelques petits problèmes. Jusqu'à présent, tout fonctionne correctement, mais maintenant je passe à l'incorporation des années bissextiles qui est où j'ai des problèmes. J'ai du mal à déterminer l'année en cours qui est sélectionnée. J'aiJavascript Drop Down Fonction
sel_year.onchange = recalculateDays2(this);
qui, je crois, transmet la valeur de l'année en cours sélectionnée. Puis, dans la fonction recalculateDays2 Je crée une variable
year_index = x.text;
qui est censé être quelque chose comme year_index = 2011, 2012 etc. Je veux que la fonction recalculateDays2 régler les jours feb 29 lorsque l'utilisateur a changé à l'année 2012. S'il vous plaît aider ...
<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>