Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2021, 10:54
Интересующийся
Отправить личное сообщение для Medvedoc Посмотреть профиль Найти все сообщения от Medvedoc
 
Регистрация: 14.10.2011
Сообщений: 17

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

Код
https://codepen.io/Medvedoc/pen/mdmmXBN
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2021, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

Сообщение от Medvedoc
готовой даты
формат даты какой?
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2021, 13:10
Интересующийся
Отправить личное сообщение для Medvedoc Посмотреть профиль Найти все сообщения от Medvedoc
 
Регистрация: 14.10.2011
Сообщений: 17

dd.mm.yyyy - формат

а каким образом можно вывести остальные дни предыдущих месяцев? Получается сейчас вместо них сейчас пустые блоки. Пробовал сделать, но у меня в самом начале добавляются значения и то минусовые.
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2021, 13:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

Medvedoc,
document.addEventListener("DOMContentLoaded", function() {
            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
            }

            let formatter = new Intl.DateTimeFormat("ru", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit"
            });

            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');
                        let Data = new Date(year, month, i - first_day.getDay() + 1);
                        day.dataset.data = formatter.format(Data);
                        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)
            }


            calendar.querySelector('.calendar-days').addEventListener('click', ({
                target
            }) => {
                if (target = target.closest('.calendar-day-hover')) {
                    document.querySelector('.heading').innerHTML = target.dataset.data;
                    this.querySelector('.curr-date').classList.remove('curr-date');
                    target.classList.add('curr-date')
                }
            })
        });
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2021, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,977

Сообщение от Medvedoc
а каким образом можно вывести остальные дни предыдущих месяцев?
на форуме сотни календарей.
https://javascript.ru/forum/misc/826...tml#post537506
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2021, 16:59
Интересующийся
Отправить личное сообщение для Medvedoc Посмотреть профиль Найти все сообщения от Medvedoc
 
Регистрация: 14.10.2011
Сообщений: 17

Спасибо за ответ =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно развернуть/свернуть только один блок по клику? nina_ jQuery 2 19.07.2016 13:07
как узнать имеется ли обработчик события HelpeR Events/DOM/Window 9 17.02.2010 17:20
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 08:41
Как заставить this в обработчике события указывать на объект? Dmitryk Events/DOM/Window 3 16.03.2009 07:45
Как повесить обработчик onchange на lookup spps Общие вопросы Javascript 0 09.09.2008 14:59