Question

对于一个项目，我需要一个非常简单的日历。所以我从互联网上获得了一些代码并进行了修改。

我目前的代码以及我在http://jsfiddle.net/baa2tqdo/1/上看到的内容。总结这里代码的重要部分。

我的HTML代码：

<html>
<!-- ... -->
<div id="container">
    <div class="box">
        <!-- Calendar -->
        <div class="calendar"></div>
    </div>
</div>
<!-- ... -->
</html>

我的JavaScript代码

var calendar = function () {

    var date = new Date();

    createCalendarHead(date);
    createCalendar(date);

    // month back
    $('.back').click(function () {
        date = decreaseMonth(date);
        $('.calendar-body').empty();
        createCalendar(date);
    });

    // year back
    $('.back-year').click(function () {
        date.setYear(date.getYear() - 1);
        $('.calendar-body').empty();
        createCalendar(date);
    });

    // month forward
    $('.forward').click(function () {
        date = increaseMonth(date);
        $('.calendar-body').empty();
        createCalendar(date);
    });

    // year forward
    $('.forward-year').click(function () {
        date.setYear(date.getYear() + 1);
        $('.calendar-body').empty();
        createCalendar(date);
    });

    // Current
    $('.current').click(function () {
        date = new Date();
        $('.calendar-body').empty();
        createCalendar(date);
    });
};

function increaseMonth(d) {
    if (d.getMonth() == 11) {
        d.setMonth(0);
        d.setYear(d.getYear() + 1);
    } else {
        d.setMonth(d.getMonth() + 1);
    }

    return d;
}

function decreaseMonth(d) {
    if (d.getMonth() == 0) {
        d.setMonth(11);
        d.setYear(d.getYear() - 1);
    } else {
        d.setMonth(d.getMonth() - 1);
    }

    return d;
}

function getLastMonth(d) {
    if (d.getMonth() == 0) {
        return 11
    } else {
        return d.getMonth() - 1;
    }
}

function replaceAll(find, replace, str) {
    var tempStr = str.replace(find, replace);
    if (tempStr.contains(find)) {
        return replaceAll(find, replace, tempStr);
    }
    return tempStr;
}

function createCalendarHead(d) {

    var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
    var days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];

    // add head and body for calendar
    $('.calendar')
        .append('<div class="calendar-nav">')
        .append('<div class="calendar-head">')
        .append('<div class="calendar-body">');

    $('.calendar-nav')
        .append('<div class="back-forward">')
        .append('<div class="current-date">' + months[d.getMonth()] + ' ' + (d.getYear() <= 200 ? d.getYear() + 1900 : d.getYear()) + '</div>');

    $('.back-forward')
        .append('<input type="button" class="button back-year" value="<<"/>')
        .append('<input type="button" class="button back" value="<"/>')
        .append('<input type="button" class="button current" value="today"/>')
        .append('<input type="button" class="button forward" value=">"/>')
        .append('<input type="button" class="button forward-year" value=">>"/>');

    // fill head with days
    for (var c = 0; c < days.length; c++) {
        $('.calendar-head')
            .append('<div class="days">' + days[c] + '</div>');
    }
}

function createCalendar(date) {

    var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
    var days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    var d = date;
    var day = d.getDate();
    var month = d.getMonth();
    var year = d.getYear();

    year <= 200 ? year += 1900 : year;

    // leap year?
    year % 4 == 0 && year != 1900 ? days_in_month[1] = 29 : days_in_month;

    // days in current month
    var total = days_in_month[month];

    // calculate days of last month
    var DatumMonat = d;
    DatumMonat.setDate(1);
    var ErsterTag = DatumMonat.getDay();

    // add days of last month
    for (var i = 1; i < ErsterTag; i++) {
        $('.calendar-body').append('<div class="day-box last-month">' +
        (days_in_month[getLastMonth(d)] - ((ErsterTag - 1) - i)) +
        '</div>');
    }

    var $tagDatum;
    var $classTagDatum;

    for (i = 1; i <= total; i++) {

        // create current date as string
        $tagDatum = (i < 10 ? '0' + i : i) + '' + (month + 1) + '' + year;
        $classTagDatum = "." + $tagDatum;

        $('.calendar-body ').append('<div class="day-box ' + $tagDatum + '">');

        if (day == i) $($classTagDatum).append('<div class="tag today">' + i + '</div>');
        else $($classTagDatum).append('<div class="tag">' + i + '</div>')
    }

    $('.current-date')
        .empty()
        .text(months[month] + ' ' + (year <= 200 ? year + 1900 : year));
}

但是上个月的日子没有正确显示（除了当月），我找不到我的错误。我的第二个问题是正确显示月份和年份。改变一年后两次它不再起作用。我希望有人可以帮助我解决我的问题，或者至少给我一些提示。提前谢谢。

Answer 1

不要使用像0,30,11这样的幻数。这会使代码复杂化。

将选定的日历日期传递给您的功能

将日期设置为1以传递变量（将月份设置为上一年的1）

将第-1天添加到新日期。

将通过日期设为新日期。

对下个月或年份选择使用相同的方法。使用日期功能更改日期而不是设置月份的年数。这将处理闰年和不同的月份

Answer 2

使用date.getFullYear（）。不推荐使用getYear（）。

带jquery的简单日历脚本 - 如何计算上个月的天数？

2 个答案: