日历显示 24 小时制,我需要 12 小时制
Calendar displays 24 hour clock and I need 12 hour clock
我有这个显示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));
getHours 返回范围 0-23,因此如果它大于 11,请减去 12。
你甚至可以花哨并喜欢
(getHours() + 24) % 12 || 12
相关文章:
- 如何将分钟格式化为小时和分钟,但仅显示小时(如果's>60分钟
- 当数字太小时,Highcharts轴无法正确显示值
- 月视图 - 仅显示 9 小时而不是 09:00
- 如何获得只显示小时的倒计时
- 元素维度正在DOM中更新,但更改并没有发生;t在调整大小时显示
- 需要在EXTJ的时间字段中显示07:00、15:00、23:00(增加8小时)
- 完整日历提前 1 小时显示事件
- 当非整小时偏移时,带有 Moment 的时区显示不正确.js
- 每 3 小时显示一次对话框
- 高度自动 - 调整浏览器大小时显示隐藏内容
- 高图表区域:以小时为单位的 x 轴,但每小时显示多个点
- 在JavaScript中调整窗口大小时显示()和隐藏()
- Flot错误地解释时间戳:将不同的小时显示为同一小时
- 在调整窗口大小时显示不同的JS动画
- 每小时显示另一个内容
- 每X小时显示两个图像,Javascript
- 窗口重新调整大小时显示隐藏元素的滑块
- 调整窗口大小时显示滚动条
- 滑块脚本在调整大小时显示不同的项目范围
- 当iframe视窗很小时显示图像,使用媒体查询