Как сделать выбор даты максимальной и минимальной для отображения товаров?

Question

[Владимир Куликов]

Здравствуйте!
Есть инпуты с классами min_data и max_data

<input class="uk-input timepicker min_data" id="form-horizontal-text" type="text" placeholder="С" autocomplete="off">
<input class="uk-input timepicker max_data" id="form-horizontal-text" type="text" placeholder="По" autocomplete="off">

Есть блоки с датами на странице, дат в блоках несколько. Их можно вот так найти .item_block_filter .uk-data_items span

Все блоки начинаются с дива с классом .item_block_filter

<div class="safisha uk-width-1-3@m item_block_filter uk-grid-margin uk-first-column" data-type="Театр Мероприятие" data-price="250" data-city="Вынгапур" tabindex="-1">
   <div class="uk-inline">
      <a class="uk-margin-remove-adjacent" href="">
      </a>
      <div class="uk-inline">
         <a class="uk-margin-remove-adjacent" href="">
            <img data-src="" class="uk-border-rounded" uk-img="" src="">
         </a>
         <div class="uk-position-top-right">
            <a class="uk-margin-remove-adjacent" href="">
            </a>
            <ul class="uk-iconnav uk-iconnav-vertical">
               <a class="uk-margin-remove-adjacent" href="">
               </a>
               <li><a class="uk-margin-remove-adjacent" href=""></a><a href="#"><i class="far fa-heart"></i></a></li>
               <li><a href="#"><i class="far fa-share-square"></i></a></li>
            </ul>
         </div>
      </div>
      <div class="card-single-content">
         <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <a href="#">
               <div class="uk-grid-small uk-grid" uk-grid="">
                  <div class="uk-width-2-3 uk-data_items uk-first-column">
                     <!-- 								дата -->
                     <span>2020-02-27 15:00</span><br>
                     <span>2020-02-27 15:00</span><br>
                     <span>2020-02-29 15:00</span><br>
                     <span>2020-03-02 15:00</span><br>
                     <!--                                 Цена -->
                     Цена: <b>250</b>
                  </div>
                  <div class="uk-width-1-3 uk-divider-vertical">
                     <b>Концерт старый + будущий в Ноябрьске</b> <br>
                  </div>
               </div>
            </a>
            <a class="uk-button uk-button-danger uk-button-small uk-margin-small-top uk-width-1-1">Подробнее</a>
         </div>
      </div>
   </div>
</div>

$('.min_data,.max_data').keyup(function() {
        const
            min = $('.min_data').val(),
            max = $('.max_data').val();

        $('.item_block_filter').each(function() {
            const price = +this.dataset.price;
            $(this).toggle((!min || min <= price) && (!max || price <= max));
        });
    });

Заранее спасибо

Comments

[ThunderCat]

1) id="form-horizontal-text" дублируется у 2 инпутов
2) По вопросу нифига не понятно - что нужно то? Спрятать товары не входящие в диапазон дат?

[Владимир Куликов]

ThunderCat, 1 - id вроде и не используются 2 - Спрятать товары не входящие в диапазон дат

[ThunderCat]

Владимир Куликов, во первых есть же нормальный инпут даты, во вторых - даты можно почистить от символов - : и пробелов и сравнивать как числа.
UPD: В идеале перевести даты в таймстемп и сравнивать по таймстемпу.

[Владимир Куликов]

ThunderCat, Дат в одном блоке несколько(

[ThunderCat]

Владимир Куликов, и что? Нужна какя-то конкретная или любая подойдет? Опишите нормально вопрос, а то так мы еще месяц переписываться будем.

[Владимир Куликов]

ThunderCat, Есть в блоке список дат.

<span>2020-02-27 15:00</span><br>
                     <span>2020-02-27 15:00</span><br>
                     <span>2020-02-29 15:00</span><br>
                     <span>2020-03-02 15:00</span><br>

В инпуте мы пишем минимальную дату 2020-02-22. И в блоке с датами убираются все даты ниже даты из инпута. Если дат совсем нет, которые выше той что в инпуте, то скрываем сам блок

[ThunderCat]

Владимир Куликов,

В инпуте мы пишем минимальную дату 2020-02-22.

*Выбираем из датаселектора, на него нужно повесить онЧейндж

И в блоке с датами убираются все даты ниже даты из инпута.

у вас уже есть ич по итем блоку, в нем нужно $(this).filter() ваши спаны и тоже ич.

Если дат совсем нет, которые выше той что в инпуте, то скрываем сам блок

ну вот, вы все описали сами, вроде почти код получился... Или вы ждете что кто-то вам готовый код напишет?

[Владимир Куликов]

ThunderCat, ич - это что?

[ThunderCat]

Владимир Куликов, each

Answer 1

[Алексей Гудырин]

2020-02-27 15:00

2020-02-27 15:00

2020-02-29 15:00

2020-03-02 15:00


Цена: 250

товар всегда стоит 250 (выбрать нужно из span-ов или из классов хрен-2-3 (uk-width-2-3 uk-data_items uk-first-column) верстка супер или конкретней задавайте вопрос.

Comments

[Владимир Куликов]

Фильтрация по спанам с датами, по цене не нужна.

Но я уже сделал это по совету https://qna.habr.com/user/ThunderCat из комментариев к вопросу.
Если вам интересно, можете предложить свои варианты.
У меня так получилось

$('.data_btn_go').on('click',function() {
        const
        min_data1 = $('.min_data').val(),
        max_data1 = $('.max_data').val();
        min_data = min_data1.replace(new RegExp('-', 'g'),"");
        max_data = max_data1.replace(new RegExp('-', 'g'),"");
        $('.item_block_filter').each(function() {
            hidden_true = $(this).is(":hidden");
            const price2 = +this.dataset.datatime_minus;
            $(this).toggle((!min_data && !hidden_true || min_data <= price2 && !hidden_true) && (!max_data && !hidden_true || price2 <= max_data && !hidden_true));
        });
    });

Проверка на скрытые объекты тут не относится к вопросу.

[Алексей Гудырин]

Владимир Куликов, datepicker не пробовали?

[Владимир Куликов]

Алексей Гудырин, он установлен. Вы про календарь?

[Алексей Гудырин]

или вы дату в input забиваете (у машины не работает мотор заливать солярку или бензин;какая дизельная бензиновая ==карбюраторная || инжектор)пока не увидишь сложно сказать .

[Владимир Куликов]

Алексей Гудырин, Дата вбивается в инпут. Убираются все минусы (d-y-m). У спанов data-datatime_minus с датой (dym)

[Алексей Гудырин]

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