Как сделать простой выбор диапазона в javascript

Я хочу создать пользовательский выбор диапазона, в котором пользователи могут выбрать начальный и конечный дни из данных вариантов. Макет и данные, которые я получаю от API, таковы, что я не могу использовать плагины jQuery/javascript datepicker. Кроме того, это очень просто.Как сделать простой выбор диапазона в javascript

Основная концепция такова: Предположим, что существует 10 вариантов (1,2,3,4,5,6,7,8,9,10).

Если пользователь нажмет на 3, начнется его диапазон. И при втором нажатии, скажем, пользователь выбирает 8, его конец диапазона. Очень простой подборщик.

<div class="range_container"> 
    <div class="day">Day 1</div> 
    <div class="day">Day 2</div> 
    <div class="day selected start-day">Day 3</div> <!-- If User Picks 3, add "selected" and "start-day" class--> 
    <div class="day">Day 4</div> 
    <div class="day">Day 5</div> 
    <div class="day">Day 6</div> 
    <div class="day">Day 7</div> 
    <div class="day selected end-day">Day 8</div><!-- User Picks 8, same as start date --> 
    <div class="day">Day 9</div> 
    <div class="day">Day 10</div> 
    </div>

Как я могу достичь этого с помощью jquery ?. Однако я стараюсь отвечать на запросы Google, результаты всегда приводят к выбору диапазона дат, который не является тем, что я ищу. Пожалуйста помоги! Любые ссылки на учебные пособия или руководства будут очень оценены.

источник

2017-02-20 Kanchan Rai

Используйте обработчик события click, чтобы проверить, какие даты уже были выбраны, и соответственно добавить/удалить классы. Проверьте это, также увидеть код комментарии:

$('.day').click(function(){ 
 
    if($('.start-day').length<1){//Start date not already selected 
 
    $(this).addClass('selected');  
 
    $(this).addClass('start-day'); 
 
    }else if($('.end-day').length<1){//End date not already selected 
 
    if($(this).index()<=$('.start-day').index()) return 0;//Check if end date is after start date 
 
    $(this).addClass('selected');  
 
    $(this).addClass('end-day');  
 
    }else{//Start and end date already selected 
 
    $('.day').removeClass('selected start-day end-day'); 
 
    $(this).addClass('selected');  
 
    $(this).addClass('start-day'); 
 
    } 
 
});

.start-day{ 
 
    color:green; 
 
    font-weight:bold; 
 
} 
 
.end-day{ 
 
    color:red; 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="range_container"> 
 
    <div class="day">Day 1</div> 
 
    <div class="day">Day 2</div> 
 
    <div class="day selected start-day">Day 3</div> <!-- If User Picks 3, add "selected" and "start-day" class--> 
 
    <div class="day">Day 4</div> 
 
    <div class="day">Day 5</div> 
 
    <div class="day">Day 6</div> 
 
    <div class="day">Day 7</div> 
 
    <div class="day selected end-day">Day 8</div><!-- User Picks 8, same as start date --> 
 
    <div class="day">Day 9</div> 
 
    <div class="day">Day 10</div> 
 
    </div>

источник

2017-02-20 09:08:11

Благодарим за решение! Я определенно попробую решения, предложенные Кишаном и Тай-Дуонг-Нгуеном, но пока это лучший вариант для меня, поскольку мне нужно спешить с этим проектом. Это было также то, что я пытался сделать в своем коде, но не мог обойти его. Спасибо @ Theodore K. –

@ Kanchan, рад, что помог. Исправлена ошибка, замененная 'break' на' return 0', которая вызвала исключение. –

@ KanchanRai, пожалуйста, помните, чтобы всегда предлагать полезные ответы. –

здесь точное решение, что вы ищете http://nitinhayaran.github.io/jRange/demo/

вам просто нужно настроить в соответствии с вашими потребностями.

источник

2017-02-20 09:01:48

Если вам нужна помощь в настройке, просто скажите мне, что я пришлю вам весь код, который я использую в своем проекте –

, если вы используете выше jRange, тогда для минимального значения и максимального значения используйте эту переменную ** min: $ («.price-range-min»). text(), \t \t \t \t \t max: $ (". price-range-max"). text() ** в jquery .. я взял 1 целый день для настройки Это. –

для js-файла см. [Link] (https://jsfiddle.net/ikishan/075qLmo9/) –

Вы можете иметь массив и слушатель событий, прикрепленный к каждой из этих дней дивы, слушая за клик, который добавляет в массив , предполагая, что длина массива составляет менее 2. Например:

const range = []; 
 
const dayDivs = Array.from(document.getElementsByClassName("day")); 
 
dayDivs.forEach(div => div.addEventListener('click',() => { 
 
    if (range.length < 2) range.push(div.textContent); 
 
}));

Затем у вас есть массив под названием «диапазон», который имеет ваши начальные и конечные дни.

источник

2017-02-20 09:10:29

Большое спасибо Thai-Duong Nguyen, это похоже на интересное решение. Я постараюсь это точно. –

Как сделать простой выбор диапазона в javascript

ответ

Смежные вопросы