Форум

Volonter · #1 (**permalink**) 14.02.2023, 10:58

Всем привет, парни прошу помочь с простейшим календарем на JS. Есть 2 кнопки, "Назад" и "Вперед" и слой с выводом текущей даты в формате "Вторник, 14 февраля 2023 года", всего то и нужно, чтобы при нажатии кнопок в слое менялась дата соответствено Назад - 13, 12, 11 февраля, вперед 15, 16, 17 и т.д. Главное, чтобы перелистывание было бесконечным, то есть можно долистать хоть до 1900-го года, хоть до 2250. Заранее благодарю! З.Ы. Календарей в сети полно, а вот такого не нашел, а самому с датами сложно в JS

voraa · #2 (**permalink**) 14.02.2023, 13:09

<body>
<button id="back">&lt;</button>
<span id="date"></span>
<button id="forward">&gt;</button>

<script>
	const msinday = 24*60*60*1000;
	let curday = Date.now();
	
	const sdate = document.getElementById('date')
	const outdate = (date) => {
		const opt= { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
		const str = new Intl.DateTimeFormat('ru', opt).format(new Date(date))
		sdate.textContent = str
	}
	document.getElementById('back')
		.addEventListener('click', ()=> {curday -= msinday; outdate(curday)});
	document.getElementById('forward')
		.addEventListener('click', ()=> {curday += msinday; outdate(curday)});
		
	outdate(curday);	
</script>
</body>

рони · #3 (**permalink**) 14.02.2023, 15:18

как вариант ...

<meta charset="utf-8">
    <button id="back">&lt;</button>
    <span id="date"></span>
    <button id="forward">&gt;</button>
    <script>
        let curday = new Date();
        let date = curday.getDate();
        const sdate = document.getElementById('date');
        const opt = {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        };
        const intl = new Intl.DateTimeFormat('ru', opt);
        const outdate = (up = 0) => {
            curday.setDate(date + up);
            date = curday.getDate();
            sdate.textContent = intl.format(curday)
        }
        document.getElementById('back')
            .addEventListener('click', () => outdate(-1));
        document.getElementById('forward')
            .addEventListener('click', () => outdate(+1));
        outdate();
    </script>

Volonter · #4 (**permalink**) 15.02.2023, 08:53

Парни спасибо огромное! Оба варианта приняты на вооружение)) К сожалению, не могу никому плюсануть, система требует, чтобы плюсики ставились не только voraa и рони

Форум

Справочник

Discord чат

Курсы javascript