Javascript-форум - как сделать?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - как сделать? (https://javascript.ru/forum/misc/78060-kak-sdelat.html)

Цитата:

Сообщение от Блондинка

ну не знаю как ещё объяснить, есть форма с двумя списками для даты и месяца и полем ввода, в эту форму надо добавить текстовый узел выводящий день недели, но с помощью стилей изменить внешний вид этого текстового узла, чтобы он визуально не отличался от списка...

Вам уже такое сделали — сообщение №39. Хотя с точки зрения конечного пользователя здесь странно именно то, что день недели написан на кнопке, запускающей раскрывающийся список! Вам ведь на самом деле такой плохой UX не нужен!

Вот мой вариант — последняя часть сообщения №67 Вы можете поменять стили, как хотите! (Например, что вам стоит добавить такую же закруглённую рамку для дня недели, как в том примере это сделано у <input> и <select>?)

Malleys,
пост 74, можно использовать

<span id="day">

и внутрь поместить див с нулевой высотой/шириной задать диву рамку 3-5 пикселей и левую правую нижнюю рамку сделать прозрачной, тем самым нарисовав треугольник, типа как в списке, но надо чтобы этот треугольник не отличался визуально от аналогичного в селекте, а он сильно различается в разных браузерах...

Цитата:

Сообщение от Блондинка

Malleys, пост 74, можно использовать

Вы пишете так, как будто это у меня что-то не получается! Если вы знаете как делать, то делайте!

Цитата:

Сообщение от Блондинка

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

Можно, чтобы не отличался!

<span id="day">Воскресенье</span>
<style>
  #day {
    -webkit-appearance: menulist;
    padding-right: 1em;
  }
</style>

Только зачем вам эта стрелка? Это же не всплывающий список!

Malleys,
не во всех браузерах это сработает, в том числе и в Habbit browser, который ты когда то скачал...

Цитата:

Сообщение от Malleys

Только зачем вам эта стрелка? Это же не всплывающий список!

захотелось чтобы элементы спан и селект в которых отображается составляющие дату визуально не отличалось, поэтому я и подумала почему бы не использовать html из 74 поста...

Цитата:

Сообщение от Блондинка

не во всех браузерах это сработает, в том числе и в Habbit browser, который ты когда то скачал...

Ну вообще-то в нём тоже работает, и в Firefox и в Chrome и в Safari (и хотя в Edge в консоли показывает как правильное свойство, оно визуально никак не отличается от простого текста!)...

Цитата:

Сообщение от Блондинка

чтобы элементы спан и селект в которых отображается составляющие дату визуально не отличалось, поэтому я и подумала почему бы не использовать html из 74 поста

А зачем тогда разные названия?

Вы ещё можете использовать треугольник ▼.

<span id="day">Воскресенье ▼</span>

Цитата:

Сообщение от Русский

Остаётся только ответить вопрос, почему же дни именуются не с начала седмицы, середина которой - среда, а с понедельника

Дни как раз таки именуются от недѣли, начала седмицы. Недѣля — точка отсчёта. По прошествий одного дня с недѣли получается понедѣльникъ, по прошествий двух дней с недѣли получается вторникъ, по прошествий четырёх дней с недѣли получается четвергъ и т.д. ((Например, тогда получается, что во вторникъ днём с начала седмицы прошло 2 дня и ещё столько-то часов вторника))

Если говорить о неделе, начало которой в понедельник, то получается, что точка отсчёта — понедельник. И тогда получается, что по прошествии одного дня с понедельника получается вторник, по прошествий трёх дней с понедельника получается четверг, и т.д. Что как раз таки не логично, поэтому стали использовать порядковые числительные для объяснения такой недели. Т. е. второй день — вторник, четвёртый день — четверг, и т.д. (Например, тогда получается, что во вторник днём с начала недели прошёл 1 день и ещё столько-то часов вторника)

Цитата:

Сообщение от Русский

А ей использовать код на ES6 религия не позволяет.

Вы перепутали религию с браузером Habit!

Цитата:

Сообщение от laimas

Да, либо поставить опции списка в том же порядке, что возвращает функция getDay(), либо использовать наш порядок, но уменьшая индекс на 1:

document.querySelector('#day_01').options[(d.getDay()||7)-1].selected = true;

laimas, а тут где нужно изменить порядок дней, полночи пробую методом тыка, пока безрезультатно

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar</title>
</head>
<body>
<style>
.month, .month.vert .week, .day { display:inline-block; }
.month.vert .day { display:block; }
.day { border: 1px solid #ccc; width: 30px; line-height: 30px; text-align: center; margin: 1px; }
</style>
<div class="month"></div>
<script>
var calendar = {
update: function (year, month) {
this.days.length = 7;
var stepDay = new Date(year, month, 1);
stepDay.setDate(1 - stepDay.getDay());
var lastDay = new Date(year, month + 1, 0);
lastDay.setDate(lastDay.getDate() + 6 - lastDay.getDay());
while (stepDay <= lastDay) {
this.days.push(stepDay.getDate());
stepDay.setHours(24);
}
},
render: function () {
var html = '';
for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
if (j == 0) html += '<div class="week">';
html += '<div class="day">' + this.days[i] + '</div>';
if (j == 6) html += '</div>';
}
this.element.innerHTML = html;
},
toggle: function () {
this.element.classList.toggle('vert');
}
};
var today = new Date, thisYear = today.getFullYear(), thisMonth = today.getMonth();
calendar.days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();
</script>
</body>
</html>

Блондинка,
вам дали алгоритм тут

Цитата:

Сообщение от Rise

step.setHours(24 * (0 - (step.getDay() + 6) % 7)); last.setHours(24 * (6 - (last.getDay() + 6) % 7));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>
      .month,
      .month.vert .week,
      .day {
        display: inline-block;
      }
      .month.vert .day {
        display: block;
      }
      .day {
        border: 1px solid #ccc;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
      }
    </style>
    <div class="month"></div>
    <script>
      var calendar = {
        update: function(year, month) {
          this.days.length = 7;
          var stepDay = new Date(year, month, 1);
          stepDay.setDate(stepDay.getDate() + 0 - ((stepDay.getDay() + 6) % 7));
          var lastDay = new Date(year, month + 1, 0);
          lastDay.setDate(lastDay.getDate() + 6 - ((lastDay.getDay() + 6) % 7));
          while (stepDay <= lastDay) {
            this.days.push(stepDay.getDate());
            stepDay.setHours(24);
          }
        },
        render: function() {
          var html = '';
          for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
            if (j == 0) html += '<div class="week">';
            html += '<div class="day">' + this.days[i] + '</div>';
            if (j == 6) html += '</div>';
          }
          this.element.innerHTML = html;
        },
        toggle: function() {
          this.element.classList.toggle('vert');
        },
      };
      var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

      calendar.element = document.querySelector('.month');
      calendar.element.addEventListener('click', function() {
        calendar.toggle();
      });
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
  </body>
</html>

Блондинка,
можно так ...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>

      .day {
        border: 1px solid #ccc;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
        background-color: #B0C4DE;
      }
      .month {
          display: flex;
          flex-wrap:wrap;
          width: 238px;
          height: 238px;
          justify-content: space-around;
          margin: 30px auto;
      }
      .month.vert{
          flex-direction: column;
      }
      .day:nth-child(7n + 6), .day:nth-child(7n + 7){
         background-color:  #FF85C6;
      }
      .day:nth-child(-n + 7) {
          color: #FFFFFF;
      }

    </style>
    <div class="month"></div>
    <script>
      var calendar = {
        update: function(year, month) {
          var stepDay = new Date(year, month, 1);
          stepDay.setDate(stepDay.getDate() - ((stepDay.getDay()||7) - 1));
          var lastDay = new Date(stepDay);
          lastDay.setDate(lastDay.getDate() + 41);
          while (stepDay <= lastDay) {
            this.days.push(stepDay.getDate());
            stepDay.setHours(24);
          }
        },
        render: function() {
          var html = '';
          for (var i = 0; i < this.days.length; i++) {
            html += '<div class="day">' + this.days[i] + '</div>';
          }
          this.element.innerHTML = html;
        },
        toggle: function() {
          this.element.classList.toggle('vert');
        },
      };
      var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

      calendar.element = document.querySelector('.month');
      calendar.element.addEventListener('click', function() {
        calendar.toggle();
      });
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
  </body>
</html>

рони,
как то не очень с этими строчками

var lastDay = new Date(stepDay);
          lastDay.setDate(lastDay.getDate() + 41);

слишком много дней следующего месяца показано

Цитата:

Сообщение от Блондинка

слишком много дней следующего месяца показано

зато всегда одинаково квадрат 7 * 7 = 49 как в W10 :)