Выделить по клику число в месяце

101
30 ноября 2020, 02:30

Прошу подсказать, как по клику выделить определенную дату и как эту выбранную дату связать с файлом Базы Данных для последующего выбора информации в ней на выбранную нами дату.

<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>&nbsp;'; 
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>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;'; 
} 
} 
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>

Answer 1

для выделения можно добавить такой код через 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>

READ ALSO
Gulp 4.0.1. Модуль &#39;del&#39; не найден

Gulp 4.0.1. Модуль 'del' не найден

Столкнулся с проблемой: при сборке проекта в Gulp версии 40

103
Django. Как полностью скрыть поля в форме?

Django. Как полностью скрыть поля в форме?

Подскажите, пожалуйста, как полностью скрыть поля в форме, сейчас скрывает только поле, но название поля остаётся?

301
Парсинг на клиенте

Парсинг на клиенте

Необходимо на клиенте получить данные с другого сайтаНужная информация на странице другого сайта хранится в

100
Как написать счетчик ОСТАЛОСЬ попыток 3

Как написать счетчик ОСТАЛОСЬ попыток 3

Вот мой скриптНе могу понять почему после ввода продолжает проверять цикл? Задача следущая: При посещении страницы, необходимо попросить...

104