Как разместить форму в диве?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
min-width: 550px;
}
#content {
border: 1px solid hsl(0,0%,66%);
padding: 10px;
}
#week_day {
margin: 2.5px 0 10px 0;
border-radius: 8px/6px;
}
.calendar-view button,
.calendar-view select,
.calendar-view input {
background-color: #e5f2ff;
color: #0080ff;
height: ;
margin: 0;
padding: 2.5px;
border: 1px solid #0080ff;
font: bold 14px serif;
}
.calendar-view button[value] {
font-weight: bold;
border: 1px solid #0080ff;
width: 30px;
height: 30.5px;
}
.calendar-view button[value="-1"] {
border-right-width: 1px;
border-radius: 18px 0 0 18px/12px 0 0 12px;
margin-right: -1px;
}
select {
position: relative; top: -2.5px;
}
.calendar-view button[value="1"] {
border-left-width: 1px;
border-radius: 0 18px 18px 0/0 12px 12px 0;
float: right;
margin-left: -1px;
}
.calendar-view input[type=number] {
width: 70px;
height: 23.5px;
display: inline-block;
text-align: center;
position: relative; top: -2.5px;
}
.calendar-view .control {
display: inline-block;
margin: 0 15px 0 0;
overflow: hidden;
}
.calendar-view .control:nth-child(4) {
margin: 0;
}
</style>
<script>
function DateView(date) {
this.date = date;
this.element = document.createElement("div");
this.element.className = "calendar-view";
this.header = document.createElement("div");
this.element.appendChild(this.header);
this.dateElement = document.createElement("select");
this.dateElement.addEventListener("change", function() {
view.date.setDate(this.value);
view.update();
});
this.element.appendChild(this.dateElement);
this.addControls(this.dateElement, "Date");
this.monthElement = document.createElement("select");
this.monthElement.addEventListener("change", function() {
view.date.setMonth(this.value);
view.update();
});
this.element.appendChild(this.monthElement);
this.addControls(this.monthElement, "Month");
this.yearElement = document.createElement("input");
this.yearElement.type = "number";
this.yearElement.addEventListener("change", function() {
view.date.setFullYear(this.value);
view.update();
});
this.element.appendChild(this.yearElement);
this.addControls(this.yearElement, "FullYear");
var view = this;
view.update();
}
DateView.prototype = {
constructor: DateView,
update: function() {
var days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
var monthes = "января февраля марта апреля мая июня июля августа сентября октября ноября декабря".split(" ");
this.header.innerHTML = `
<select id="week_day">
<option selected>${days[this.date.getDay()]}</option>
</select>`;
var date = this.date.getDate();
var html = '';
var days = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();
for(var i = 1; i <= days; i++)
html += '<option '+ (i === date ? ' selected' : '')+ '>'+ i+ '</option>';
this.dateElement.innerHTML = html;
var month = this.date.getMonth();
var html = '';
for(var i = 0; i < 12; i++)
html+='<option value="'+ i+ '"'+ (i === month ? ' selected' : '')+ '>'+ monthes[i]+ '</option>';
this.monthElement.innerHTML = html;
this.yearElement.value = this.date.getFullYear();
},
addControls: function(element, component) {
var view = this;
var controlField = document.createElement("div");
controlField.className = "control";
element.parentNode.insertBefore(controlField, element);
var prevButton = document.createElement("button");
prevButton.textContent = "◅";
prevButton.value = "-1";
prevButton.addEventListener("click", handler);
var nextButton = document.createElement("button");
nextButton.textContent = "▻";
nextButton.value = "1";
nextButton.addEventListener("click", handler);
controlField.appendChild(prevButton);
controlField.appendChild(element);
controlField.appendChild(nextButton);
element.controls = [prevButton, nextButton];
function handler() {
view.date["set" + component](view.date["get" + component]() + Number(this.value));
view.update();
}
}
};
// Пример использования
document.addEventListener("DOMContentLoaded", function() {
var myDate = new Date();
var view = new DateView(myDate);
document.body.appendChild(view.element);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
