20.07.2019, 18:06
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Русский, а я думаю что виновата лень разработчиков, которым просто лень добавить лишнюю строчку с вендорным префиксами для свойства css например, и что лучше стараться писать код кроссбраузерность по возможности...
|
|
20.07.2019, 19:11
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
рони,
вот типа как тут, выпадающий список и поле ввода
<style>
#calendar3 {
width: 100%;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
}
#calendar3 thead tr:last-child {
font-size: small;
color: rgb(85, 85, 85);
}
#calendar3 tbody td {
color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
color: rgb(231, 140, 92);
}
#calendar3 tbody td.today {
outline: 3px solid red;
}
</style>
<table id="calendar3">
<thead>
<tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
<tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
<tbody>
</table>
<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
}else{
if ( // список официальных праздников
(i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
(i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
(i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
(i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
(i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
(i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
(i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
(i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
(i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
(i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
(i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
) {
calendar += '<td class="holiday">' + i;
}else{
calendar += '<td>' + i;
}
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>
|
|
20.07.2019, 23:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
календарь с выбором месяца селектом и кнопками
Блондинка,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#wrapper button:after {
content: 'prev';
}
#wrapper button:nth-of-type(2):after {
content: 'next';
}
#wrapper button:nth-of-type(3){
order: 1;
}
#wrapper button:nth-of-type(2){
order: 2;
}
#wrapper button:nth-of-type(3):after {
content: 'сегодня';
}
#wrapper input {
width: 50px;
height: 18px;
margin-top: -3px;
text-align: center;
}
#wrapper {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper table {
flex: 1 0 100%;
border-collapse: separate;
width: 100%;
padding: 1px;
}
table,
th,
td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th,
td {
text-align: center;
}
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeek:nth-child(n + 6) {
background-color: #ffc3d7;
color: #dc143c;
}
td.currentDay {
background-color: #c2d6ff;
border: 1px solid #00f;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
}
td.currentDay:nth-child(n + 6) {
background-color: #ffc3d7;
border: 1px solid #ff69b4;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n + 6) {
background-color: #ffb4d2;
color: #b92346;
}
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #e6f5ff;
}
#wrapper th:nth-child(n + 6).currentDay {
background-color: #ff389c;
color: #ffed85;
}
#wrapper button {
flex 0;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
let timer;
function createCalendar(id, year, month) {
const table = document.createElement('table');
const header = document.createElement('tr');
const daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
const monthNames = [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь',
];
const data = new Date(year, month, 0);
const daysInMonth = data.getDate();
const indexMonth = data.getMonth();
const currentData = new Date();
const currentDay = currentData.getDate();
const currentMonth = currentData.getMonth();
const currentFullYear = currentData.getFullYear();
let selectHtml = monthNames.reduce(
(html, nameMonth, i) =>
(html += `<option value=${i} ${
indexMonth == i ? 'selected' : ''
}>${nameMonth}`),
`<select>`
);
const yearFull = data.getFullYear();
selectHtml += `<input value=${yearFull}>`;
table.insertAdjacentHTML(
'beforeend',
`<tr><th colspan='7'>${selectHtml}</th></tr>`
);
for (const day of daysOfWeek)
header.insertAdjacentHTML('beforeend', `<th>${day}</th>`);
table.append(header);
let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
let nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
const week = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const day = document.createElement('td');
let cls = 'currentMonthWeek';
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
if (
currentMonth == indexMonth &&
currentFullYear == yearFull &&
nextDayToAdd == currentDay
) {
cls = 'currentDay';
table.querySelectorAll('th')[i + 1].className = 'currentDay';
}
day.innerHTML = nextDayToAdd;
}
cls && day.classList.add(cls);
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
let div = document.getElementById(id);
div.innerHTML = '';
div.append(table);
[0, 2].forEach(n => {
let button = document.createElement('button');
button.addEventListener('click', () =>
createCalendar(id, yearFull, indexMonth + n)
);
div.append(button);
});
table.querySelector('select').addEventListener('input', function() {
createCalendar(id, yearFull, ++this.value);
});
table.querySelector('input').addEventListener('input', function() {
if (/^\d{4}$/.test(this.value))
createCalendar(id, +this.value, indexMonth + 1);
});
if (currentMonth != indexMonth || currentFullYear != yearFull) {
let button = document.createElement('button');
button.addEventListener('click', () =>
createCalendar(id, currentFullYear, currentMonth + 1)
);
div.append(button);
}
function refresh() {
window.clearTimeout(timer);
let finish = new Date().setHours(24, 0, 0, 0);
finish -= currentData;
timer = window.setTimeout(function() {
createCalendar(id, yearFull, indexMonth + 1);
refresh();
}, finish);
}
refresh();
return table;
}
let table = createCalendar('wrapper', 2019, 6);
</script>
</body>
</html>
Последний раз редактировалось рони, 21.07.2019 в 00:52.
|
|
21.07.2019, 02:14
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
рони,
если честно, то даже не знаю как реагировать, дело в том что при просмотре запускаемого примера а также в блокноте виден только див
#wrapper {
036
width: 320px;
037
padding: 5px;
038
margin: 5px;
039
border: 1px solid #a9a9a9;
040
border-radius: 6px/4px;
видимо и телефон и браузер безнадежно устарели настолько, что мне не суждено увидеть даже календарь...
|
|
21.07.2019, 02:19
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Русский,
под словом "кросбраузерно" подразумевается основные браузеры версии хотя бы 2-3 летней давности, но никак не браузеры 90х годов прошлого столетия...
|
|
21.07.2019, 02:36
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Русский
|
|
Это у кого праздник, интересно, у тебя, что ли? Кстати, тоже брехня, после того как параша провозгласила независимость, СССР формально существовал ещё полгода.
|
В гугле По запросу "календарь яваскрипт" на' первой странице ссылка, откуда было тупо скопировано кусок кода, так что претензии по поводу того какие праздники я отмечаю, не принимаются, можешь их(претензии) высказать владельцу того сайта... |
|
21.07.2019, 11:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
calendar select es5 polyfill
Блондинка,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#wrapper button:after {
content: 'prev';
}
#wrapper button:nth-of-type(2):after {
content: 'next';
}
#wrapper button:nth-of-type(3){
order: 1;
}
#wrapper button:nth-of-type(2){
order: 2;
}
#wrapper button:nth-of-type(3):after {
content: 'сегодня';
}
#wrapper input {
width: 50px;
height: 18px;
margin-top: -3px;
text-align: center;
}
#wrapper {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper table {
flex: 1 0 100%;
border-collapse: separate;
width: 100%;
padding: 1px;
}
table,
th,
td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th,
td {
text-align: center;
}
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeek:nth-child(n + 6) {
background-color: #ffc3d7;
color: #dc143c;
}
td.currentDay {
background-color: #c2d6ff;
border: 1px solid #00f;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
}
td.currentDay:nth-child(n + 6) {
background-color: #ffc3d7;
border: 1px solid #ff69b4;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n + 6) {
background-color: #ffb4d2;
color: #b92346;
}
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #e6f5ff;
}
#wrapper th:nth-child(n + 6).currentDay {
background-color: #ff389c;
color: #ffed85;
}
#wrapper button {
flex 0;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
"use strict";
var timer;
function createCalendar(id, year, month) {
var table = document.createElement('table');
var header = document.createElement('tr');
var daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
var data = new Date(year, month, 0);
var daysInMonth = data.getDate();
var indexMonth = data.getMonth();
var currentData = new Date();
var currentDay = currentData.getDate();
var currentMonth = currentData.getMonth();
var currentFullYear = currentData.getFullYear();
var selectHtml = monthNames.reduce(function (html, nameMonth, i) {
return html += "<option value=".concat(i, " ").concat(indexMonth == i ? 'selected' : '', ">").concat(nameMonth);
}, "<select>");
var yearFull = data.getFullYear();
selectHtml += "<input value=".concat(yearFull, ">");
table.insertAdjacentHTML('beforeend', "<tr><th colspan='7'>".concat(selectHtml, "</th></tr>"));
for (var _i = 0, _daysOfWeek = daysOfWeek; _i < _daysOfWeek.length; _i++) {
var _day = _daysOfWeek[_i];
header.insertAdjacentHTML('beforeend', "<th>".concat(_day, "</th>"));
}
table.append(header);
var firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
var nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
var week = document.createElement('tr');
for (var i = 0; i < 7; i++) {
var day = document.createElement('td');
var cls = 'currentMonthWeek';
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
if (currentMonth == indexMonth && currentFullYear == yearFull && nextDayToAdd == currentDay) {
cls = 'currentDay';
table.querySelectorAll('th')[i + 1].className = 'currentDay';
}
day.innerHTML = nextDayToAdd;
}
cls && day.classList.add(cls);
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
var div = document.getElementById(id);
div.innerHTML = '';
div.append(table);
[0, 2].forEach(function (n) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, yearFull, indexMonth + n);
});
div.append(button);
});
table.querySelector('select').addEventListener('change', function () {
createCalendar(id, yearFull, ++this.value);
});
table.querySelector('input').addEventListener('input', function () {
if (/^\d{4}$/.test(this.value)) createCalendar(id, +this.value, indexMonth + 1);
});
if (currentMonth != indexMonth || currentFullYear != yearFull) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, currentFullYear, currentMonth + 1);
});
div.append(button);
}
function refresh() {
window.clearTimeout(timer);
var finish = new Date().setHours(24, 0, 0, 0);
finish -= currentData;
timer = window.setTimeout(function () {
createCalendar(id, yearFull, indexMonth + 1);
refresh();
}, finish);
}
refresh();
return table;
}
var table = createCalendar('wrapper', 2019, 6);
</script>
</body>
</html>
Последний раз редактировалось рони, 21.07.2019 в 18:47.
|
|
21.07.2019, 11:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
Блондинка,
конвертор в es5
https://babeljs.io/repl
Copy & Paste
скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно.
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
|
|
21.07.2019, 17:09
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
рони, сейчас скрипт почти работает,
при загрузке страницы отображается сетка календаря за июнь 2019, а хотелось бы чтобы был текущий месяц
при вводе года и при клике на кнопки всё работает, но при попытке выбрать месяц в выпадающем списке ничего не меняется, хотелось бы чтобы и селект работал
возможно ли добавить кнопки для перемещения По годам (и разместить кнопки перед таблицей, возле списка/поля)
возможно ли заполнить пустые ячейки числами пред/буд месяца разными отдельными стилями как в 16 посте?
|
|
21.07.2019, 18:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
Сообщение от Блондинка
|
|
хотелось бы чтобы и селект работал
|
исправлено.
|
Сообщение от Блондинка
|
|
возможно ли
|
да возможно, но лучше сами, так будет быстрее. |
|
|
|
