Question

我有3个下拉列表框，year，month和day。

我需要填充当前日期的最后1095天的值。目前我通过在SQL中使用日历系统表运行查询来实现此目的。有没有办法直接在javascript中做到这一点？

我使用SQL的原因是我无法将3个下拉框与今天相关联1095天。例如，今天是2009年9月6日。如果我为year选择2009，那么month下拉列表应该从9月开始列出，day下拉列表应该从6列出。

我需要用户灵活选择过去1095天的任何日期。所以首先用户选择2009.only然后应该填充月份下拉框。它应该只有几个月从9月到decemenber。然后选择月份作为9月只有1到30应该在日期下拉框中填充。我当前通过在sql中使用系统日期表来执行此操作。

Answer 1

代码有点困难，但是以下方法效果很好。制作了两个类似的函数，第一个叫做onload来初始化所有三个选择框，第二个函数在onchange事件发生时被调用：

function init_dates() {

    var now = new Date();
    var newest = [];
    newest[0] = now.getFullYear();
    newest[1] = now.getMonth() + 1;
    newest[2] = now.getDate();

    var old = new Date(now.getTime() - 1095 * 86400 * 1000);
    var oldest = [];
    oldest[0] = old.getFullYear();
    oldest[1] = old.getMonth() + 1;
    oldest[2] = old.getDate();

    // YEARS
    var opt;
    var i = oldest[0];
    var year = document.getElementById('year');
    while (i <= newest[0]) {
        opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = i;
        if (i == newest[0]) {
            opt.selected = 'selected';
        }
        year.appendChild(opt);
        i++;
    }

    // MONTHS
    var minmonth = (year.value == oldest[0]) ? oldest[1] : 1;
    var maxmonth = (year.value == newest[0]) ? newest[1] : 12;
    var month = document.getElementById('month');
    while (minmonth <= maxmonth) {
        opt = document.createElement('option');
        opt.value = minmonth;
        opt.innerHTML = minmonth;
        month.appendChild(opt);
        minmonth++;
    }

    // DAYS
    var minday = (year.value == oldest[0] && month.value == oldest[1]) ? oldest[2] : 1;
    var maxday = (year.value == newest[0] && month.value == newest[1]) ? newest[2] : 33;
    if (maxday == 33) {
        // find correct maxday
        maxday = 27;
        var d = new Date(year.value, month.value - 1, maxday, 0, 0, 0, 0);
        while (d.getDate() > 1) {
            maxday++;
            d = new Date(year.value, month.value - 1, maxday, 0, 0, 0, 0);
        }
        maxday--;
    }
    var day = document.getElementById('day');
    while (minday <= maxday) {
        opt = document.createElement('option');
        opt.value = minday;
        opt.innerHTML = minday;
        day.appendChild(opt);
        minday++;
    }
}

function update_dates() {
    var now = new Date();
    var newest = [];
    newest[0] = now.getFullYear();
    newest[1] = now.getMonth() + 1;
    newest[2] = now.getDate();

    var old = new Date(now.getTime() - 1095 * 86400 * 1000);
    var oldest = [];
    oldest[0] = old.getFullYear();
    oldest[1] = old.getMonth() + 1;
    oldest[2] = old.getDate();

    //selected date in selectboxes
    var year = document.getElementById('year');
    var month = document.getElementById('month');
    var day = document.getElementById('day');
    var sel = new Date(year.value, month.value-1, day.value, 0,0,0,0);
    var selected = [];
    selected[0] = sel.getFullYear();
    selected[1] = sel.getMonth() + 1;
    selected[2] = sel.getDate();
    year.innerHTML = month.innerHTML = day.innerHTML = ''; //clear old list

    // YEARS
    var opt;
    var i = oldest[0];
    while (i <= newest[0]) {
        opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = i;
        if (i == selected[0]) {
            opt.selected = 'selected';
        }
        year.appendChild(opt);
        i++;
    }

    // MONTHS
    var minmonth = (year.value == oldest[0]) ? oldest[1] : 1;
    var maxmonth = (year.value == newest[0]) ? newest[1] : 12;
    while (minmonth <= maxmonth) {
        opt = document.createElement('option');
        opt.value = minmonth;
        opt.innerHTML = minmonth;
        if (minmonth== selected[1]) {
            opt.selected = 'selected';
        }
        month.appendChild(opt);
        minmonth++;
    }

    // DAYS
    var minday = (year.value == oldest[0] && month.value == oldest[1]) ? oldest[2] : 1;
    var maxday = (year.value == newest[0] && month.value == newest[1]) ? newest[2] : 33;
    if (maxday == 33) {
        // find correct maxday
        maxday = 27;
        var d = new Date(year.value, month.value - 1, maxday, 0, 0, 0, 0);
        while (d.getDate() > 1) {
            maxday++;
            d = new Date(year.value, month.value - 1, maxday, 0, 0, 0, 0);
        }
        maxday--;
    }
    while (minday <= maxday) {
        opt = document.createElement('option');
        opt.value = minday;
        opt.innerHTML = minday;
        day.appendChild(opt);
        if (minday == selected[2]) {
            opt.selected = 'selected';
        }
        minday++;
    }
}

http://jsfiddle.net/gCDXs/1/

如何使用javascript中的某些日历范围值填充下拉列表框

1 个答案: