@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);
}

Код Javascript
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)
}

Код можно посмотреть на codepen.io
  • Вопрос задан
  • 139 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
Метод 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');
  }
});
Ответ написан
@IvanGrishov
Начинающий Frontend разработчик
Готово.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы