Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2019, 22:22
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

как сделать?
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>  
  <form>
   <button>></button>
   <select id="month" name="month">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <button>></button>
   <button><</button>
   <input type="number" id="year" name="year" size="4" min="0" max="2250" step="1">

   <button>></button>
  </form>
 <script> 
var d = new Date(); 
document.addEventListener('DOMContentLoaded', function() { 
document.querySelector('#month').options[d.getMonth()].selected = true;
document.querySelector('#year').value = d.getFullYear();
});
</script>
 </body>
</html>


подскажите если не трудно, как сделать чтобы при клике на кнопки со стрелочками у опций переключился селектед, и содержимое поля ввода ввода менялось?
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2019, 23:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Русский,
Изменить_месяц, сложно.

const Изменить_месяц = вперёд => {
		const
			поле = document.getElementById("Месяц"),
      выделено = поле.selectedIndex;
		if (вперёд) {
			if (выделено < 11) поле.selectedIndex++;
		}
		else {
			if (выделено > 0) поле.selectedIndex--;
		}
	};
Ответить с цитированием
  #3 (permalink)  
Старый 21.07.2019, 00:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <form>
   <input type=button onclick="Изменить_месяц(false);" value="<" />
   <select id="Месяц" name="Месяц">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <input type=button onclick="Изменить_месяц(true);" value=">" />
   <input type=button onclick="Изменить_год(false);" value="<" />
   <input type=number size=4 min=0 max=2250 step=1 id="Год" name="Год" />
   <input type=button onclick="Изменить_год(true);" value=">" />
  </form>
  <script>
    const сегодня = new Date();
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById("Месяц").options[сегодня.getMonth()].selected = true;
        document.getElementById("Год").value = сегодня.getFullYear();
    });

    const Изменить_месяц = вперёд => {
        const поле = document.getElementById("Месяц");
        let выделено = Math.max(1, Math.min(10,поле.selectedIndex));
        вперёд ? выделено++ : выделено--
        поле.selectedIndex = выделено
    }

    const Изменить_год = вперёд => {
        const поле = document.getElementById("Год");
        вперёд ? поле.value++ : поле.value--;
    }
  </script>
 </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2019, 02:47
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

по идее в ваших двух примерах атрибут селектед должен быть установлен у опции с текущим месяцем и поле с годом заполнено, а отображается в селекте январь и поле пустое...
Ответить с цитированием
  #5 (permalink)  
Старый 21.07.2019, 08:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Блондинка
а отображается в селекте январь и поле пустое...
1. выкинуть браузер или искать полифилы.
2. искать вариант перевода es6 в es5 или самостоятельно менять стрелочные функции на "обычные" и т.д.?
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2019, 11:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

babel es5 Try it out
Блондинка,
конвертор в es5
https://babeljs.io/repl
Copy & Paste
скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно.
<script src="https://polyfill.io/v3/polyfill.min.js"></script>


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <form>
   <input type=button onclick="Изменить_месяц(false);" value="<" />
   <select id="Месяц" name="Месяц">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <input type=button onclick="Изменить_месяц(true);" value=">" />
   <input type=button onclick="Изменить_год(false);" value="<" />
   <input type=number size=4 min=0 max=2250 step=1 id="Год" name="Год" />
   <input type=button onclick="Изменить_год(true);" value=">" />
  </form>
  <script>
    "use strict";
var сегодня = new Date();
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById("Месяц").options[сегодня.getMonth()].selected = true;
  document.getElementById("Год").value = сегодня.getFullYear();
});

var Изменить_месяц = function Изменить_месяц(вперёд) {
  var поле = document.getElementById("Месяц");
  var выделено = Math.max(1, Math.min(10, поле.selectedIndex));
  вперёд ? выделено++ : выделено--;
  поле.selectedIndex = выделено;
};

var Изменить_год = function Изменить_год(вперёд) {
  var поле = document.getElementById("Год");
  вперёд ? поле.value++ : поле.value--;
};
  </script>
 </body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2019, 17:12
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

рони,
спасибо большое, сейчас всё нормально работает
Ответить с цитированием
  #8 (permalink)  
Старый 21.07.2019, 18:01
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

кто знает как создать выпадающий список с одной опций для названия сегодн дня недели?

как создать выпадающий список для чисел месяца, что бы количество опций соответствовало количеству дней в месяце, (лишние опции скрыть) ?
Ответить с цитированием
  #9 (permalink)  
Старый 21.07.2019, 18:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Блондинка
лишние опции скрыть
количество дней в месяце или зависимые селекты
Ответить с цитированием
  #10 (permalink)  
Старый 21.07.2019, 20:23
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14