Как сделать ползунок даты?

@MaxLestor · Регистрация: 29.03.2019

Студворк — интернет-сервис помощи студентам

https://cridit.ru/kreditnye-karty-onlajn на этом сайте есть второй ползунок, в котором в зависимости от расположения ползунка меняется дата и слова дней недели и года. Не могу реализовать это второй день хелп плиз

@sash23 · 29.03.2019, 15:09

там используется https://jqueryui.com/slider/

@Mr_Sergo · 29.03.2019, 20:01

MaxLestor,

Или так -> https://jsfiddle.net/Mr_Sergo/3p6t9gus/2/

HTML5
1
2
3
4
5
<div class="res">На срок:
    <span id="num">1</span>
    <span id="unit">неделя</span>
</div>
<input type="range" min="1" max="25" step="1" value="1">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let decl = (num,arr) => arr[(num%100>4 && num%100<20)? 2 : [2,0,1,1,1,2][(num%10<5)?num%10:5]];
let range = document.querySelector('[type="range"]');
 
range.addEventListener('input',()=> {
    let val = range.value;
    let unitTxt = decl(val,['неделя','недели','']);
 
    range.value > 4 && range.value < 16 ? (val = range.value - 4, unitTxt = decl(val,['месяц','месяца','месяцев'])) :
    range.value > 15 ? (val = range.value - 15, unitTxt = decl(val,['год','года','лет'])) : '';
 
    unit.textContent = unitTxt;
    num.textContent = Math.ceil(val);
});

CSS
1
2
3
input{
    width: 500px;
}

Стилизацию вам оставляю

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@MaxLestor 0 / 0 / 0 Регистрация: 29.03.2019 Сообщений: 1

	Как сделать ползунок даты? 29.03.2019, 14:51. Показов 2006. Ответов 2 Метки нет (Все метки) https://cridit.ru/kreditnye-karty-onlajn на этом сайте есть второй ползунок, в котором в зависимости от расположения ползунка меняется дата и слова дней недели и года. Не могу реализовать это второй день хелп плиз 0

@sash23 563 / 410 / 259 Регистрация: 31.05.2016 Сообщений: 1,105
	29.03.2019, 15:09
	там используется https://jqueryui.com/slider/ 0