Как повесить обработчик события нажатия с передачей информации в блок?

Question

[Medvedoc]

Имеется скрипт календаря. Как сделать обработку нажатия на число даты и передача в блок html формы готовой даты? И как кнопку нажатую сделать активной?

HTML

<h1 class="heading">сюда вывести выбранную дату</h1>
  <hr/><div class="light"><div class="calendar">
        <div class="calendar-header">
            <span class="month-picker" id="month-picker">Февраль</span>
            <div class="year-picker">
                <span class="year-change" id="prev-year">
                    <pre><</pre>
                </span>
                <span id="year">2021</span>
                <span class="year-change" id="next-year">
                    <pre>></pre>
                </span>
            </div>
        </div>
        <div class="calendar-body">
            <div class="calendar-week-day">
                <div>Пн</div>
                <div>Вт</div>
                <div>Ср</div>
                <div>Чт</div>
                <div>Пт</div>
                <div>Сб</div>
                <div>Вс</div>
            </div>
            <div class="calendar-days"></div>
        </div>
        
        <div class="month-list"></div>
    </div>
  </div>

CSS

.calendar {
    height: max-content;
    width: max-content;
    background-color: var(--bg-main);
    border-radius: 30px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    /* transform: scale(1.25); */
}
 
.light .calendar {
    box-shadow: var(--shadow);
}
 
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25px;
    font-weight: 600;
    color: var(--color-txt);
    padding: 10px;
}
 
.calendar-body {
    padding: 10px;
}
 
.calendar-week-day {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-weight: 600;
}
 
.calendar-week-day div {
    display: grid;
    place-items: center;
    color: var(--bg-second);
}
 
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    color: var(--color-txt);
}
 
.calendar-days div {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    position: relative;
    cursor: pointer;
    animation: to-top 1s forwards;
    /* border-radius: 50%; */
}
 
.calendar-days div span {
    position: absolute;
}
 
.calendar-days div:hover span {
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}
 
.calendar-days div span:nth-child(1),
.calendar-days div span:nth-child(3) {
    width: 2px;
    height: 0;
    background-color: var(--color-txt);
}
 
.calendar-days div:hover span:nth-child(1),
.calendar-days div:hover span:nth-child(3) {
    height: 100%;
}
 
.calendar-days div span:nth-child(1) {
    bottom: 0;
    left: 0;
}
 
.calendar-days div span:nth-child(3) {
    top: 0;
    right: 0;
}
 
.calendar-days div span:nth-child(2),
.calendar-days div span:nth-child(4) {
    width: 0;
    height: 2px;
    background-color: var(--color-txt);
}
 
.calendar-days div:hover span:nth-child(2),
.calendar-days div:hover span:nth-child(4) {
    width: 100%;
}
 
.calendar-days div span:nth-child(2) {
    top: 0;
    left: 0;
}
 
.calendar-days div span:nth-child(4) {
    bottom: 0;
    right: 0;
}
 
.calendar-days div:hover span:nth-child(2) {
    transition-delay: 0.2s;
}
 
.calendar-days div:hover span:nth-child(3) {
    transition-delay: 0.4s;
}
 
.calendar-days div:hover span:nth-child(4) {
    transition-delay: 0.6s;
}
 
.calendar-days div.curr-date,
.calendar-days div.curr-date:hover {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 50%;
}
 
.calendar-days div.curr-date span {
    display: none;
}
 
.month-picker {
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
}
 
.month-picker:hover {
    background-color: var(--color-hover);
}
 
.year-picker {
    display: flex;
    align-items: center;
}
 
.year-change {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 10px;
    cursor: pointer;
}
 
.year-change:hover {
    background-color: var(--color-hover);
}
 
.calendar-footer {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
 
.toggle {
    display: flex;
}
 
.toggle span {
    margin-right: 10px;
    color: var(--color-txt);
}
 
.dark-mode-switch {
    position: relative;
    width: 48px;
    height: 25px;
    border-radius: 14px;
    background-color: var(--bg-second);
    cursor: pointer;
}
 
.dark-mode-switch-ident {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--bg-main);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease-in-out;
}
 
.dark .dark-mode-switch .dark-mode-switch-ident {
    top: 2px;
    left: calc(2px + 50%);
}
 
.month-list {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--bg-main);
    padding: 20px;
    grid-template-columns: repeat(3, auto);
    gap: 5px;
    display: grid;
    transform: scale(1.5);
    visibility: hidden;
    pointer-events: none;
}
 
.month-list.show {
    transform: scale(1);
    visibility: visible;
    pointer-events: visible;
    transition: all 0.2s ease-in-out;
}
 
.month-list > div {
    display: grid;
    place-items: center;
}
 
.month-list > div > div {
    width: 100%;
    padding: 5px 20px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    color: var(--color-txt);
}
 
.month-list > div > div:hover {
    background-color: var(--color-hover);
}

JS

let calendar = document.querySelector('.calendar')
 
const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 
isLeapYear = (year) => {
    return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 ===0)
}
 
getFebDays = (year) => {
    return isLeapYear(year) ? 29 : 28
}
 
generateCalendar = (month, year) => {
 
    let calendar_days = calendar.querySelector('.calendar-days')
    let calendar_header_year = calendar.querySelector('#year')
 
    let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
 
    calendar_days.innerHTML = ''
 
    let currDate = new Date()
    if (!month) month = currDate.getMonth()
    if (!year) year = currDate.getFullYear()
 
    let curr_month = `${month_names[month]}`
    month_picker.innerHTML = curr_month
    calendar_header_year.innerHTML = year
 
    // get first day of month
    
    let first_day = new Date(year, month, 1)
 
    for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
        let day = document.createElement('div')
        if (i >= first_day.getDay()) {
            day.classList.add('calendar-day-hover')
            day.innerHTML = i - first_day.getDay() + 1
            day.innerHTML += `<span></span>
                            <span></span>
                            <span></span>
                            <span></span>`
            if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
                day.classList.add('curr-date')
            }
        }
        calendar_days.appendChild(day)
    }
}
 
let month_list = calendar.querySelector('.month-list')
 
month_names.forEach((e, index) => {
    let month = document.createElement('div')
    month.innerHTML = `<div data-month="${index}">${e}</div>`
    month.querySelector('div').onclick = () => {
        month_list.classList.remove('show')
        curr_month.value = index
        generateCalendar(index, curr_year.value)
    }
    month_list.appendChild(month)
})
 
let month_picker = calendar.querySelector('#month-picker')
 
month_picker.onclick = () => {
    month_list.classList.add('show')
}
 
let currDate = new Date()
 
let curr_month = {value: currDate.getMonth()}
let curr_year = {value: currDate.getFullYear()}
 
generateCalendar(curr_month.value, curr_year.value)
 
document.querySelector('#prev-year').onclick = () => {
    --curr_year.value
    generateCalendar(curr_month.value, curr_year.value)
}
 
document.querySelector('#next-year').onclick = () => {
    ++curr_year.value
    generateCalendar(curr_month.value, curr_year.value)
}

Comments

[ThunderCat]

Одним из главных навыков программиста является вычленить из потока сознания конкретную задачу, ужатую до формулировки, не требующей кода и тонны объяснений. У вас же минимум 3 проблемы объединены в одну, четкого понимания в чем у вас затык нету, алгоритм того что вы пытались сделать не описан. В вашем случае в чем собственно проблема?

[Medvedoc]

мне нужно вывести в тег H1 выбранную дату в формате dd.mm.yyyyy. То есть нажав на конкретное число должна отобразиться заданная дата.

Answer 1

[0xD34F]

Метод generateCalendar - убрать объявление локальной переменной currDate.

document.querySelector('.calendar-days').addEventListener('click', e => {
  if (e.target.classList.contains('calendar-day-hover')) {
    currDate = new Date(curr_year.value, curr_month.value, e.target.innerText);
    document.querySelector('.heading').innerText = currDate.toLocaleDateString('ru-RU');
    e.currentTarget.querySelector('.curr-date')?.classList.remove('curr-date');
    e.target.classList.add('curr-date');
  }
});

Comments

[Medvedoc]

Спасибо большое! Все работает прекрасно

[Medvedoc]

а если тег H1 заменить на input?

[0xD34F]

Medvedoc, мда-а-а-а, вам лени и наглости не занимать. Думайте сами.

[Medvedoc]

Прошу прощения, не было в мыслях даже.
Я добавил тег

<input id="headings" type="text" value="headings" />

А в Jacascript изменил на

document.querySelector('.calendar-days').addEventListener('click', e => {
  if (e.target.classList.contains('calendar-day-hover')) {
    currDate = new Date(curr_year.value, curr_month.value, e.target.innerText);
    document.getElementById('headings').value = currDate.toLocaleDateString('ru-RU');
    e.currentTarget.querySelector('.curr-date')?.classList.remove('curr-date');
    e.target.classList.add('curr-date');
  }
});

Правильно сделал?

[0xD34F]

Medvedoc, не знаю. А вы что думаете?

[Medvedoc]

Вроде работает =)

[Medvedoc]

Да, точно работает. Спасибо )

Answer 2

[Иван Гришов]

Готово.

Comments

[Medvedoc]

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

[Иван Гришов]

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

[Medvedoc]

вот это имел в виду - дни с прошлых месяцев (просто чтобы выводились, но не выводились в блок с классом heading)

[Medvedoc]

у меня получалось сверху 0, а снизу пустота

[Medvedoc]

выводилось у меня сверху в убывающем порядке, например -4 -3 -2 -1 0, хотя по правильному должны были быть дни прошлого месяца

[Иван Гришов]

с этим не помогу, нужно долго разбираться. Вообще в таких случаях используют готовые библиотеки календарей, там все просто, нужно лишь указать определенный параметр. Вот пример календаря. https://snipp.ru/jquery/jquery-ui-datepicker.

А это, как раз, тот параметр, который вам необходим. jsfiddle.net/fLveY/2

[Medvedoc]

Иван, а если у меня несколько тегов h1 с классом heading

<h1 class="heading">сюда вывести выбранную дату</h1>
 <h1 class="heading">сюда вывести выбранную дату2</h1>  
<h1 class="heading">сюда вывести выбранную дату3</h1>

Как в каждую вывести выбранную дату* В данный момент выводит только в одно

[Medvedoc]

кажется я понял =) путем перебора всех полученных значений через querySelectorAll

[Medvedoc]

но вот если вывожу два одинаковых блока с календарем, то при клике в одном меняется значение h1 из другого блока. Пока не разобрался как это побороть