Skip to content

L
lab-28_webinar-15
Commit edfde542 authored by Vladislav Rybalko's avatar Vladislav Rybalko
Browse files
Options

initial commit

parents
Show whitespace changes
Inline Side-by-side
Showing with 156 additions and 0 deletions
.DS_Store 0 → 100644
View file @ edfde542
File added
css/style.css 0 → 100644
View file @ edfde542
.date-picker {
display: none;
width: 275px;
height: 210px;
border: 1px solid black;
margin-top: 5px;
margin-left: 5px;
}
.calendarHead {
text-align: center;
background-color: rgba(128, 128, 128, 0.253);
padding: 5px;
}
.week {
margin-top: 5px;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(1, 1fr);
}
.dayOfWeek {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.day {
text-align: center;
padding: 5px;
}
\ No newline at end of file
index.html 0 → 100644
View file @ edfde542
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Document</title>
</head>
<body>
<div id="container">
<p>Date: </p>
<input class="date-input" value="" readonly type="text">
</div>
<script src="./js/main.js"></script>
</body>
</html>
\ No newline at end of file
js/main.js 0 → 100644
View file @ edfde542
const days = [ 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс',];
const months = [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ]
const container = document.getElementById('container')
const input = document.getElementsByClassName('date-input')
const datePicker = document.createElement('div')
datePicker.className = 'date-picker'
container.append(datePicker)
input[0].addEventListener('focus', () => {
datePicker.style.display = 'block'
})
let currentDate = new Date()
const year = currentDate.getFullYear()
const getDaysInMonth = (year, month) => new Date(year, month+1, 0).getDate()
const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay()
console.log(getDaysInMonth(year, 5));
console.log(getFirstDayOfMonth(year, 5));
const monthName = () => months[currentDate.getMonth()]
const setWeek = () => {
const week = document.createElement('div')
for (const day of days) {
week.append(`<div class='dayOfWeek'>${day}</div>`)
}
return week.innerText
}
const setDays = () => {
const days = document.createElement('div')
const currentMonth = currentDate.getMonth()
const totalDays = getDaysInMonth(year, currentMonth)
const firstDay = getFirstDayOfMonth(year, currentMonth)
for(let i = 1; i < firstDay; i++) {
const dayElement = document.createElement('div')
days.appendChild(dayElement)
}
for (let i = 1; i <= totalDays; i++) {
const dayElement = document.createElement('button')
dayElement.className = 'day'
dayElement.innerText = i
days.appendChild(dayElement)
}
return days.innerHTML
}
function drawCalendar() {
const month = monthName()
const week = setWeek()
const days = setDays()
const printCurrentDate = `<div class='calendarHead'>${month} ${year}</div>`
const printWeek = `<div class='week'>${week}</div>`
const printDays = `<div class='days'>${days}</div>`
const calendar = `
${printCurrentDate}
${printWeek}
${printDays}
`
datePicker.innerHTML = calendar
}
drawCalendar()
const printDate = () => {
const datePick = document.getElementsByClassName('day')
const month = currentDate.getMonth()+1
for(const day of datePick) {
day.addEventListener('click', () => {
input[0].value = `${year}-${month < 10 ? '0' + month : month}-${day.innerText.length < 2 ? '0' + day.innerText : day.innerText }`
datePicker.style.display = 'none'
})
}
}
printDate()
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment