Индивидуальные дата-выберите

Изображение для справки: https://postimg.org/image/xdmqyc1kz/Индивидуальные дата-выберите

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

$('#pay-period-date').click(function() { 
 
    $('#pay-period-dropdown').css('display', 'block'); 
 
});

#pay-period-dropdown { 
 
    display: none; 
 
    border-style: solid; 
 
    border-color: red; 
 
    width: 301px; 
 
    height: 208px; 
 
} 
 
#pay-period-date-select { 
 
    border-style: solid; 
 
    border-color: blue; 
 
    height: 100%; 
 
    width: 212px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#pay-period-year-select { 
 
    border-style: solid; 
 
    border-color: purple; 
 
    width: 77px; 
 
    height: 100%; 
 
    display: inline-block; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"><span id="pay-period-date">08/28/2016 - 09/03/16</span></a> 
 
<div id="pay-period-dropdown"> 
 
    <div id="pay-period-date-select"></div> 
 
    <div id="pay-period-year-select"></div> 
 
</div>

источник

2016-09-21 Spencer West

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

В основном, вам нужно выпадающее меню с предопределенным набором дат, разделение на 1 неделю, 1 день отдельно от каждого набора, в том же элементе формы?

источник

2016-09-22 01:33:50 harryparkdotio

Да, представляя периоды оплаты. У меня просто возникают проблемы с созданием этого способа. Сборщики дат и другие плагины существуют для обработки дат, но они не выглядят сексуально. Итак, моя задача - создать аналогичную функциональность, но при этом она выглядит так, как показано на рисунке. Я начал работать над функциональностью, но у меня возникли проблемы с надежным способом сделать что-то. Вот скрипка, где я нахожусь. https://jsfiddle.net/itsmespencer/v95webjg/12/ –

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

https://jsfiddle.net/itsmespencer/5080cycd/81/ обновленная скрипка. –

Индивидуальные дата-выберите

ответ

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