Прошу подсказать, как по клику выделить определенную дату и как эту выбранную дату связать с файлом Базы Данных для последующего выбора информации в ней на выбранную нами дату.
<style>
#calendar2 {
width: 18.75em;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
}
#calendar2 thead tr:last-child {
font-size: small;
color: #000;
}
#calendar2 thead tr:nth-child(1) td:nth-child(2) {
color: black;
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(2):hover, #calendar2 thead tr:nth-child(1) td:nth-child(4):hover, #calendar2 thead tr:nth-child(1) td:nth-child(5):hover {
cursor: pointer;
}
#calendar2 thead tr:nth-child(1) td:nth-child(3) {
color: green;
}
#calendar2 tbody td.drugie {
color: rgb(44, 86, 122);
cursor: pointer;
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
background: rgb(220, 0, 0);
color: #fff;
}
</style>
<table id="calendar2">
<thead>
<tr><td><<</td><td><</td><td colspan="3"></td><td>></td><td>>></td>
<tr><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td>
<tbody>
</table>
<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
}else{
calendar += '<td class="drugie">' + i;
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(3)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(3)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(3)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) { // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(2)').onclick = function() {
Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(3)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(3)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(4)').onclick = function() {
Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(3)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(3)').dataset.month)+1);
}
// переключатель минус год
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
Calendar2("calendar2", parseFloat(document.querySelector('#calendar2 thead td:nth-child(3)').dataset.year)-1, (document.querySelector('#calendar2 thead td:nth-child(3)').dataset.month));
}
// переключатель плюс год
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(5)').onclick = function() {
Calendar2("calendar2", parseFloat(document.querySelector('#calendar2 thead td:nth-child(3)').dataset.year)+1, (document.querySelector('#calendar2 thead td:nth-child(3)').dataset.month));
}
// переключатель даты
</script>
для выделения можно добавить такой код через jq(недавно нашел). а остальное не знаю
$('td').on('click', function(){
$(this).toggleClass('grey');
});
td.grey{
background: rgba(189, 195, 199, 0.7);
border-radius: 0 20px;
height: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Подскажите, пожалуйста, как полностью скрыть поля в форме, сейчас скрывает только поле, но название поля остаётся?
Необходимо на клиенте получить данные с другого сайтаНужная информация на странице другого сайта хранится в
Вот мой скриптНе могу понять почему после ввода продолжает проверять цикл? Задача следущая: При посещении страницы, необходимо попросить...