помогите доработать календарь

[рони]

setTimeout только раз

угу но я не уверен, что этим не закончится.
добавил

[Блондинка]

рони,
сорри, видимо на яваскрипт нереально создать календарь, в котором месяц можно выбрать в выпадающем списке а также с помощью кнопок вперед/назад, и год можно вводить с клавы а также с помощью кнопок типа как при использовании input type number но только видимые во всех браузерах(стилизовать поле убрал кнопки из оперы и добавив свои, видимые в всех браузерах)...

[Блондинка]

А твой браузер JavaScript-то поддерживает вообще, хотя бы ES2015? Если нет, то пора обновляться, скоро он уже половину сайтов в Интернете не будет отображать.

лучше посоветуй как заставить 100% пользователей моего сайта обновить браузеры вместо того чтобы забыть про мой сайт...

[рони]

нереально создать календарь

реально, но практически, кроме вас его создавать некому.

[Блондинка]

рони, в сети десятки если не сотни календарей на яваскрипт, но у каждого свои недостатки...

[Блондинка]

Русский, а я думаю что виновата лень разработчиков, которым просто лень добавить лишнюю строчку с вендорным префиксами для свойства css например, и что лучше стараться писать код кроссбраузерность по возможности...

[Блондинка]

рони,
вот типа как тут, выпадающий список и поле ввода

<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>&nbsp;';
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>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
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>

[рони]

Блондинка,

<!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>

[Блондинка]

рони,
если честно, то даже не знаю как реагировать, дело в том что при просмотре запускаемого примера а также в блокноте виден только див

#wrapper {
036
        width: 320px;
037
        padding: 5px;
038
        margin: 5px;
039
        border: 1px solid #a9a9a9;
040
        border-radius: 6px/4px;

видимо и телефон и браузер безнадежно устарели настолько, что мне не суждено увидеть даже календарь...

[Блондинка]

Русский,
под словом "кросбраузерно" подразумевается основные браузеры версии хотя бы 2-3 летней давности, но никак не браузеры 90х годов прошлого столетия...