Форум

Блондинка · #51 (**permalink**) 27.07.2019, 01:45

laimas,
получается что надо использовать строчку

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

и список

<select>
<option>вс</option>
<option>пн</option>
...
<option>сб</option>

вроде бы сейчас правильно...

laimas · #52 (**permalink**) 27.07.2019, 02:01

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

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

Malleys · #53 (**permalink**) 27.07.2019, 20:07

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

laimas, а тут что не так?

А вам не кажется странным, что приходится писать много однотипного кода? А если добавить ещё один календарь для изменения дат, то как вы решите ваши противоречия в коде?

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

можно спан оформить стилями, и для каждого браузера использовать своё фоновое изображение, но проще сделать селект

А зачем вам фоновое изображение, когда у элемента <select> его нет? Для этого у элемента <select> используется свойство -webkit-appearance (в старых Firefox также было свойство -moz-appearance)

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

но проще сделать селект

Который выглядит абсолютно по разному в разных браузерах и на разных платформах! Вам так и так придётся применить appearance: none и другие объявления, чтобы поля выглядели однородно!

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

оптион

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

опшен

Не, не попало... оно произносится как /ɑpʃn̩/ https://youglish.com/search/option/us

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

Неделя у «буржуев», в отличии от нас пролетариев, начинается с воскресенья

В Священном Писании сказано: «Помни субботний день и освящай его. Шесть дней работай и делай все свои дела, а седьмой день — суббота Господу, твоему Богу» (Исход [Шмот, Итро] 20:7–9, Тора, Перевод с иврита Давида Сафронова)

laimas, обратите внимание, что суббота является седьмым днём, а значит следующий день недели, который в современном русском языке называется воскресением, является первым днём. Еврейское слово שַׁבָּת означает день отдыха.

Как видите, воскресенье — с давних пор первый день недели. Также вы можете прочитать в христианских писаниях: «По прошествии же субботы, на рассвете первого дня недели, пришла Мария Магдалина и другая Мария посмотреть гроб». (Матфея 28:1, Синодальный перевод)

В иудейских, христианских и мусульманских странах семидневная неделя начиналась с воскресенья. Россия не была исключением.

И уже потом в СССР первым днём недели был объявлен понедельник...

Из-за этого безосновательного поступка у русскоязычных читателей Священного Писания возникает теперь вопрос: «Почему суббота названа седьмым днём?»

Блондинка, если вы создаёте дату new Date() и хотите изменять её при помощи графического интерфейса, то вы можете написать класс DateView, который позволяет изменять экземпляр даты. Таким образом у вас для каждой даты будет свой собственный редактор, который не мешает другим редакторам даты! Пример, как это может выглядеть...

var myDate = new Date();
var view = new DateView(myDate);
document.body.appendChild(view.element);

Просто и легко! Вот реализация класса DateView с примером...

<!DOCTYPE HTML>
<html lang="ru">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style>

.calendar-view button,
.calendar-view select,
.calendar-view input {
	box-sizing: border-box;
	height: 2em;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 0.5em;
	border: 0;
	background: white;
	font: inherit;
}
		
.calendar-view button[value] {
	min-width: 2em;
	font-weight: bold;
	border: 0 solid #eee;
}
		
.calendar-view button[value="-1"] {
	border-right-width: 1px;
}
		
.calendar-view button[value="1"] {
	border-left-width: 1px;
	float: right;
}
		
.calendar-view input[type=number] {
	width: 5em;
}

.calendar-view .control {
	display: inline-block;
	border: 1px solid #aaa;
	margin: 0.1em;
	border-radius: 0.3em;
	overflow: hidden;
}
		
@media(max-width: 250px) {
	.calendar-view .control {
		display: block;
	}
}
	</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.textContent = days[this.date.getDay()];

		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></body>

</html>

Блондинка · #54 (**permalink**) 27.07.2019, 23:38

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

Malleys · #55 (**permalink**) 28.07.2019, 01:51

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

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

А где вы вообще увидели снимки экрана и фоновые картинки в примере?

Теперь у вас новая навязчивая идея — выпадающий список с одной опцией и нету возможности выбора. А зачем вам такое? Решение — используйте текстовый узел (text node)!

Несколько месяцев назад у вас была другая навязчивая идея — нажать на <div>. Решение — используйте <button>.

Следуйте этим простым советам, и у вас всё получится!

Кстати, пример, который я сделал, он работает на вашем телефоне? Если нет, то попытайтесь найти в примере то, чего не было в 2011 году! Если да, то всё равно разберите пример, попытайтесь понять, что делает каждый участок кода!

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

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

Так именно у вас и возник такой вопрос! (Добавил в вашу цитату в квадратных скобках дни недели, которые для вас, очевидно, ещё больше не понятны!)

Если вы читали выше, то у вас определённо должен был возникнуть вопрос, а как же всё-таки называлось воскресенье! Воскресенье называлось — недѣлей (ст.‑слав. недѣ́ля, то есть днём, когда «не делают», то есть не работают, во всех остальных славянских языках, этот день называется «недѣлей» (польск. niedziela, укр. неділя, хорват. nedjelja, болгар. неделя, чеш. neděle и т. д.))

Соответственно...

начало седмицы — недѣля
первый день после недѣли — понедѣльникъ
второй день после недѣли — вторникъ
середина седмицы — среда
четвёртый день после недѣли — четвергъ
пятый день после недѣли — пятница
седьмой день седмицы — суббота (др.‑евр. שַׁבָּת, такое понимание подкреплено Священным Писанием, где сказано: «Помни субботний день и освящай его. Шесть дней работай и делай все свои дела, а седьмой день — суббота Господу, твоему Богу»)

Именно такой порядок дней вы видите в календарях России (однако до тех пор, пока не начали бесноваться безбожники СССР), в странах обоих Америк, Японии, Израиля и пр. стран.

Три дня до среды, среда и три дня после среды составляют седмицу. Вот, смотрите как симметрично! 3 + 1 + 3 = 7

А у вас получается, что середина недели — четверг, среда куда-то набок съехала, якобы нашли ошибку в Писании, а логика, что вторник — это день №2, намекает на то, что и длины вы измеряете не от 0 см, а от 1 см! (Хотя такого может и не быть! Парадокс! Однако не удивительно, что вы говорили о взаимозаменяемости времени и расстояния!)

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

список с одной опцией,

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

вопрос насчёт вторника

Знаете ли, когда кухарка либо дворник либо ещё какой человек не посоветовавшись лезет в дела неподвластные его уму, то не достойно ли это лучшего комедийного представления?

Блондинка · #56 (**permalink**) 28.07.2019, 02:12

Malleys,
после революции был советский календарь с пятидневной неделей, в настоящее время страны СНГ пользуются календарём с первым днем недели понедельник, и от этого никуда не деться...

скрипт в предыдущем посте работает

Блондинка · #57 (**permalink**) 28.07.2019, 02:17

вот приемлимое для меня решение

document.addEventListener('DOMContentLoaded', function() {
    var d = new Date(),
        days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
    
    document.querySelector('#day').textContent = days[d.getDay()];
    document.querySelector('#day_01').options[d.getDay()||7].selected = true;
    document.querySelector('#day_02').value = d.getDay()
    document.querySelector('#date').options[d.getDate()-1].selected = true;
    document.querySelector('#date_01').value = d.getDate();
    document.querySelector('#month').options[d.getMonth()].selected = true;
    document.querySelector('#year').value = d.getFullYear();
});

для 3-5 строчки этого кода использовать следующий html

<select><option id="day"></option></select>

Malleys · #58 (**permalink**) 28.07.2019, 07:18

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

вот приемлемое для меня решение

Оно не может быть приемлемым для вас, поскольку вы используете элементы управления, и при изменении не происходит перерасчёта дня недели!

По сути вы просто один раз выводите дату и всё! Таким образом, если вы всё-таки примените, то что я вам написал (а именно то, что вместо <select><option id="day"></option></select> вам следует использовать текстовый узел), то вывод даты станет приемлемым!

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

для 3-5 строчки этого кода использовать следующий html

<select><option id="day"></option></select>

Читайте внимательно, что вам написал ранее, там уже было написано, как решить вашу проблему! Решение — используйте текстовый узел (text node)!

<body>
<script>
var days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
var monthes = "января февраля марта апреля мая июня июля августа сентября октября ноября декабря".split(" ");
var date = new Date();
var textNode = document.createTextNode(days[date.getDay()] + ", " + date.getDate() + " " + monthes[date.getMonth()] + " " + date.getFullYear() + " года.");
document.body.appendChild(textNode);
</script>

Блондинка · #59 (**permalink**) 28.07.2019, 12:35

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

Malleys · #60 (**permalink**) 28.07.2019, 13:03

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript