[英]Calendar Javascript Dropdowns
I have managed to create a javascript dropdown using the following fiddle: 我设法使用以下小提琴创建了一个JavaScript下拉列表:
(function() {
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]
],
cont = document.getElementById('calendar-container');
// setup
var sel_year = document.createElement('select'),
sel_month = document.createElement('select'),
sel_day = document.createElement('select');
function createOption(txt, val) {
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(txt));
return option;
}
function clearChildren(ele) {
while (ele.hasChildNodes()) {
ele.removeChild(ele.lastChild);
}
}
function recalculateDays() {
var month_index = sel_month.value,
df = document.createDocumentFragment();
for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
df.appendChild(createOption(i + 1, i));
}
clearChildren(sel_day);
sel_day.appendChild(df);
}
function generateMonths() {
var df = document.createDocumentFragment();
calendar.forEach(function(info, i) {
df.appendChild(createOption(info[0], i));
});
clearChildren(sel_month);
sel_month.appendChild(df);
}
sel_month.onchange = recalculateDays;
generateMonths();
recalculateDays();
cont.appendChild(sel_year);
cont.appendChild(sel_month);
cont.appendChild(sel_day);
}());
http://jsfiddle.net/rlemon/j2kzv/ http://jsfiddle.net/rlemon/j2kzv/
However I would like to modify it to display the current month and date by default. 但是我想修改它以默认显示当前月份和日期。 Any suggestions?
有什么建议么?
something like this would work: http://jsfiddle.net/j2kzv/24/ 像这样的东西会工作: http : //jsfiddle.net/j2kzv/24/
I didn't change much just added checking against the current date as you create the options: 创建选项时,我并没有做太多更改,只是添加了针对当前日期的检查:
calendar.forEach(function(info, i) {
var selected = (currentDate.getMonth() === i) ? true : false;
df.appendChild(createOption(info[0], i, selected));
});
Then added a selected check when building out each option. 然后在构建每个选项时添加选定的支票。
function createOption(txt, val, selected) {
var option = document.createElement('option');
option.value = val;
option.selected = selected;
option.appendChild(document.createTextNode(txt));
return option;
}
I also updated the date function for loop to use ordinal 1 for the checkbox values rather than 0 for simplicity sake 我还更新了循环的日期函数,以将序号1用于复选框值,而不是0(为简单起见)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.