【问题标题】:Calendar displays 24 hour clock and I need 12 hour clock日历显示 24 小时制,我需要 12 小时制
【发布时间】:2015-01-28 06:11:43
【问题描述】:

我有这个显示 24 小时制格式的电子日历 JavaScript 代码。你怎么让它变成12小时制?原谅切碎的代码,我不得不删除其中的一些来创建帖子。 我已经发布了下面的代码:

(function ($) {

var eCalendar = function (options, object) {
    // Initializing global variables
    var adDay = new Date().getDate();
    var adMonth = new Date().getMonth();
    var adYear = new Date().getFullYear();
    var dDay = adDay;
    var dMonth = adMonth;
    var dYear = adYear;
    var instance = object;



    var settings = $.extend({}, $.fn.eCalendar.defaults, options);


    function print() {
        loadEvents();
        var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay();
        var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();
        var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;

        var cBody = $('<div/>').addClass('c-grid');
        var cEvents = $('<div/>').addClass('c-event-grid');
        var cEventsBody = $('<div/>').addClass('c-event-body');
        cEvents.append($('<div/>').addClass('c-event-title c-pad-top').html(settings.eventTitle));
        cEvents.append(cEventsBody);
        var cNext = $('<div/>').addClass('c-next c-grid-title c-pad-top');
        var cMonth = $('<div/>').addClass('c-month c-grid-title c-pad-top');
        var cPrevious = $('<div/>').addClass('c-previous c-grid-title c-pad-top');
        cPrevious.html(settings.textArrows.previous);
        cMonth.html(settings.months[dMonth] + ' ' + dYear);
        cNext.html(settings.textArrows.next);

        cPrevious.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', previousMonth);
        cNext.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', nextMonth);

        cBody.append(cPrevious);
        cBody.append(cMonth);
        cBody.append(cNext);
        for (var i = 0; i < settings.weekDays.length; i++) {
            var cWeekDay = $('<div/>').addClass('c-week-day c-pad-top');
            cWeekDay.html(settings.weekDays[i]);
            cBody.append(cWeekDay);
        }
        var day = 1;
        var dayOfNextMonth = 1;
        for (var i = 0; i < 42; i++) {
            var cDay = $('<div/>');
            if (i < dWeekDayOfMonthStart) {
                cDay.addClass('c-day-previous-month c-pad-top');
                cDay.html(dLastDayOfPreviousMonth++);
            } else if (day <= dLastDayOfMonth) {
                cDay.addClass('c-day c-pad-top');
                if (day == dDay && adMonth == dMonth && adYear == dYear) {
                    cDay.addClass('c-today');
                }
                for (var j = 0; j < settings.events.length; j++) {
                    var d = settings.events[j].datetime;
                    if (d.getDate() == day && (d.getMonth() - 1) == dMonth && d.getFullYear() == dYear) {
                        cDay.addClass('c-event').attr('data-event-day', d.getDate());
                        cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);
                    }
                }
                cDay.html(day++);
            } else {
                cDay.addClass('c-day-next-month c-pad-top');
                cDay.html(dayOfNextMonth++);
            }
            cBody.append(cDay);
        }
        var eventList = $('<div/>').addClass('c-event-list');
        for (var i = 0; i < settings.events.length; i++) {
            var d = settings.events[i].datetime;
            if ((d.getMonth() - 1) == dMonth && d.getFullYear() == dYear) {
                var date = lpad(d.getDate(), 2) + '/' + lpad(d.getMonth(), 2) + ' ' + lpad(d.getHours(), 2) + ':' + lpad(d.getMinutes(), 2);
                var item = $('<div/>').addClass('c-event-item');
                var title = $('<div/>').addClass('title').html(date + '  ' + settings.events[i].title + '<br />');
                var description = $('<div/>').addClass('description').html(settings.events[i].description + '<br />');
                item.attr('data-event-day', d.getDate());
                item.on('mouseover', mouseOverItem).on('mouseleave', mouseLeaveItem);
                item.append(title).append(description);
                eventList.append(item);
            }
        }
        $(instance).addClass('calendar');
        cEventsBody.append(eventList);
        $(instance).html(cBody).append(cEvents);
    }

    return print();
}

$.fn.eCalendar = function (oInit) {
    return this.each(function () {
        return eCalendar(oInit, $(this));
    });
};



}(jQuery));

【问题讨论】:

  • 花一些时间来理解代码在做什么。它计算数字的部分非常简单,我相信它不会超出你的范围。如果有帮助,请使用调试器单步执行代码。
  • 我有。我不那么精通 JS,这就是我在这里的原因。 getHour 会给我 24 小时格式。我不知道如何将其更改为 12 小时。
  • 你离得太近了!下一个:read the documentation

标签: javascript


【解决方案1】:

getHours 返回范围 0-23,因此如果大于 11,则减去 12。

你甚至可以变得喜欢并喜欢

(getHours() + 24) % 12 || 12

【讨论】:

  • var Hours = new Date().getHours() % 12;如果(小时 == 0){ 小时 += 12; } 那没用 :(
  • 我这样做了: lpad(d.getHours() %12, 2) 并且成功了。感谢您帮助埃里克,我很感激。 :)
猜你喜欢
  • 2014-11-20
  • 2023-04-08
  • 2015-04-18
  • 2018-04-13
  • 2014-04-28
  • 1970-01-01
  • 2021-12-05
  • 1970-01-01
  • 2017-03-25
相关资源
最近更新 更多