Вставить меняющуюся дату в кнопку
Как в кнопку вместо/рядом со стрелками awesome вставить предыдущую и последующую дату, как на картинке ниже:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0ab102363e.js" crossorigin="anonymous"></script>
<title>Стартовая страница</title>
</head>
<body>
<div class="col-6 m-5" id="drevleCalendarTop">
<div class="row">
<button type="button" class="btn btn-outline-primary" id="drevleCalendarLeft"><i class="fas fa-angle-double-left"></i></button>
<button type="button" class="btn btn-outline-primary" id="drevleCal">Сегодня</button>
<button type="button" class="bbtn btn-outline-primary" id="drevleCalendarRight"><i class="fas fa-angle-double-right"></i></button>
</div>
<div id="drevleCalendarDayOfWeek"> </div>
<div class="sidebar-box">
<div id="saints"></div>
</div>
<hr id="fastDivisor" />
<div id="fast"></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locale/ru.min.js"></script>
<script>
jQuery(function() {
var today = dayjs();
var full_url = "http://calendar.drevle.com/#/" + today.format("YYYY/MM/DD");
setDate(today.format("YYYY/MM/DD"));
function setDate(today) {
var req = jQuery.ajax({
type: "GET",
url: "http://api.calendar.drevle.com/" + today,
dataType: 'json',
success: function(cal) {
if (jQuery("#drevleCalendarTop").length) {
var months = {
"января": "01",
"февраля": "02",
"марта": "03",
"апреля": "04",
"мая": "05",
"июня": "06",
"июля": "07",
"августа": "08",
"сентября": "09",
"октября": "10",
"ноября": "11",
"декабря": "12"
}
var dayOfWeek = cal.day.dayOfWeek + "<br />" + cal.day.gregorianDate.substr(0, cal.day.gregorianDate.indexOf(dayjs().format("YYYY"))) + " н. ст. <br> (" + cal.day.julianDate.split(" ")[0] + " " + cal.day.julianDate.split(" ")[1] + " с. ст.)";
jQuery("#linkToDrevleCal").attr("href", full_url);
jQuery("#saints").html(cal.day.saints);
jQuery("#linkToDrevleCalCopy").html(jQuery("#linkToDrevleCal"));
jQuery("#fast").html(cal.day.fast + "<br />" + cal.day.bows + "<br />" + cal.day.dailyFeast);
jQuery("#drevleCalendarDayOfWeek").html(dayOfWeek);
}
}
});
}
jQuery("#drevleCalendarRight").click(function() {
today = today.add(1, 'd');
setDate(today.format("YYYY/MM/DD"));
});
jQuery("#drevleCal").click(function() {
today = dayjs();
setDate(today.format("YYYY/MM/DD"));
});
jQuery("#drevleCalendarLeft").click(function() {
today = today.subtract(1, 'd');
setDate(today.format("YYYY/MM/DD"));
});
});
</script>
</body>
</html>Ответы (3 шт):
Автор решения: UModeL
→ Ссылка
В принципе, у Вас в коде всё уже готово. Я добавил лишь несколько строк:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0ab102363e.js" crossorigin="anonymous"></script>
<title>Стартовая страница</title>
</head>
<body>
<div class="col-6 m-5" id="drevleCalendarTop">
<div class="row">
<button type="button" class="btn btn-outline-primary" id="drevleCalendarLeft"><i class="fas fa-angle-double-left"></i></button>
<button type="button" class="btn btn-outline-primary" id="drevleCal">Сегодня</button>
<button type="button" class="bbtn btn-outline-primary" id="drevleCalendarRight"><i class="fas fa-angle-double-right"></i></button>
</div>
<div id="drevleCalendarDayOfWeek"> </div>
<div class="sidebar-box">
<div id="saints"></div>
</div>
<hr id="fastDivisor" />
<div id="fast"></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locale/ru.min.js"></script>
<script>
jQuery(function() {
var today = dayjs();
var full_url = "http://calendar.drevle.com/#/" + today.format("YYYY/MM/DD");
setDate(today.format("YYYY/MM/DD"));
function setDate(today) {
var req = jQuery.ajax({
type: "GET",
url: "http://api.calendar.drevle.com/" + today,
dataType: 'json',
success: function(cal) {
if (jQuery("#drevleCalendarTop").length) {
var months = {
"января": "01",
"февраля": "02",
"марта": "03",
"апреля": "04",
"мая": "05",
"июня": "06",
"июля": "07",
"августа": "08",
"сентября": "09",
"октября": "10",
"ноября": "11",
"декабря": "12"
}
/* Даты на кнопках предыдущего и следующего дней */
var dBtns = new Date(today);
dBtns.setDate(dBtns.getDate() - 1);
var yesterday = dBtns.toLocaleString('ru', { month: 'long', day: 'numeric' });
jQuery("#drevleCalendarLeft").html(`<i class="fas fa-angle-double-left"></i> ${yesterday}`);
dBtns.setDate(dBtns.getDate() + 2);
var tomorrow = dBtns.toLocaleString('ru', { month: 'long', day: 'numeric' });
jQuery("#drevleCalendarRight").html(`${tomorrow} <i class="fas fa-angle-double-right"></i>`);
//===
var dayOfWeek = cal.day.dayOfWeek + "<br />" + cal.day.gregorianDate.substr(0, cal.day.gregorianDate.indexOf(dayjs().format("YYYY"))) + " н. ст. <br> (" + cal.day.julianDate.split(" ")[0] + " " + cal.day.julianDate.split(" ")[1] + " с. ст.)";
jQuery("#linkToDrevleCal").attr("href", full_url);
jQuery("#saints").html(cal.day.saints);
jQuery("#linkToDrevleCalCopy").html(jQuery("#linkToDrevleCal"));
jQuery("#fast").html(cal.day.fast + "<br />" + cal.day.bows + "<br />" + cal.day.dailyFeast);
jQuery("#drevleCalendarDayOfWeek").html(dayOfWeek);
}
}
});
}
jQuery("#drevleCalendarRight").click(function() {
today = today.add(1, 'd');
setDate(today.format("YYYY/MM/DD"));
});
jQuery("#drevleCal").click(function() {
today = dayjs();
setDate(today.format("YYYY/MM/DD"));
});
jQuery("#drevleCalendarLeft").click(function() {
today = today.subtract(1, 'd');
setDate(today.format("YYYY/MM/DD"));
});
});
</script>
</body>
</html>
Автор решения: immitsu
→ Ссылка
Для отображения значений вам надо создать/выделить для них элементы на странице. Например:
<button type="button" class="btn btn-outline-primary" id="drevleCalendarLeft">
<span class="prevDate"/>
</button>
...
<button type="button" class="bbtn btn-outline-primary" id="drevleCalendarRight">
<span class="nextDate"/>
</button>
Потом, при загрузке страницы, разместить значения. Если использовать те инструменты, который вы используете сейчас, то получится что-то такое:
<script>
var today = dayjs().locale('ru');
jQuery(document).ready(function() {
jQuery('.prevDate').text(today.add(-1, 'day').format("D MMMM"))
jQuery('.nextDate').text(today.add(1, 'day').format("D MMMM"))
})
...
Эта же логика точь-в-точь повторяется в функциях, которые обрабатывают клик по кнопке, то есть выбираем нужные элементы на странице и задаем содержание.
Автор решения: viktor-gif
→ Ссылка
Предыдущая дата:
let prevDate = new Date(new Date().getTime() - (24 * 3600 * 1000));
Следующая дата:
let prevDate = new Date(new Date().getTime() + (24 * 3600 * 1000));
И потом получить getDate() и getMonth()