КОНТРОЛЫ/date_filter.md

Twig код

<div class="date_filter {{ controlClassName|default('js-control-date-filter') }} custom_select" {% if save_overflow %}data-save-overflow="true"{% endif %}>
  <div class="date_filter__head">
    <div class="date_filter__head__icon">
      <svg class="svg-card-calendar-dims"><use xlink:href="#card-calendar"></use></svg>
    </div>

    {% if title %}
      {% set date_title = title %}
    {% elseif lang.filter_date_title %}
      {% set date_title = lang.filter_date_title %}
    {% else %}
      {% set date_title = "Any time"|i18n %}
    {% endif %}

    <span class="date_filter__period custom_select__selected {% if date_type == 'date_time_field' %}date_time_filter__period{% endif %}" data-before="{{ date_title }}">{{ date_title }}</span>
    <span class="date_filter__head__dropdown_icon"></span>
  </div>

  <div class="date_filter__dropdown {{ dropdown_class_name }}">
    {% if switcher is defined %}
      <div class="date_filter__param {{ switcher|length > 1 ? '' : 'hidden' }}">
        {% include "interface/controls/toggler.twig" with {
          items: switcher,
          class_name: 'date_filter__param__toggler ' ~ (switcher|length > 1 ? '' : 'hidden')
        } %}
      </div>
    {% endif %}
    <div>
      <div class="date_filter__period_range__options">
        <div class="date_filter__period_range__controls {% if date_type == 'date_time_field' %}date_time_filter__period_range{% endif %}">
          {% set from_name = from_name %}
          {% set to_name = to_name %}
          {% set input_class = 'js-date-filter-input ' %}

          {% if sidebar != 1 %}
            {% set input_class = input_class ~ 'date-filter-in-search ' %}
          {% endif %}

          {% if date_input_class %}
            {% set input_class = input_class ~ date_input_class %}
          {% endif %}

          {% if not from_name %}
            {% set from_name = 'filter_date_from' %}
          {% endif %}

          {% if not to_name %}
            {% set to_name = 'filter_date_to' %}
          {% endif %}

          <input type="hidden" class="date_field__preset" name="{{ name_date_preset ? name_date_preset : 'filter[date_preset]' }}" value="{{ date_preset }}" />

          {% if date_type == 'date_time_field' %}
            <div class="filter__custom_settings__item__value-wrapper clearfix filter__custom_input_date-time-field__wrapper ">
              {% include 'interface/controls/date_time_field.twig' with {
                type: 'range',
                class_name: '',
                input_class: input_class,
                name: {
                  from: from_name,
                  to: to_name
                }
              } %} 
            </div>  
          {% else %}
            {% include 'interface/controls/date_field.twig' with {
              input_class: input_class,
              type: 'range',
              class_name: 'date_filter__period_range__controls_field',
              name: {
                from: from_name,
                to: to_name
              }
            } %}
                   
          {% endif %}
        </div>
      </div>

      {% if items %}
        <ul class="date_filter__period_list {% if switcher|length == 1 %} without_button {% endif %}">
          <li class="date_filter__period_item custom_select__item" data-period="" style="display:none;">
            <span data-value="" class="custom_select__title">{{ date_title }}</span>
          </li>

          {% set custom_period_div %}
            <div class="date_filter__period_item-input-days-wrapper">
              <input class="date_filter__period_item-input-days js-date_filter__period_item js-control-autosized_input" data-comfort-zone="0" type="number" value="30" max="999" />
            </div>
          {% endset %}

          {% for item in items %}
            <li class="date_filter__period_item custom_select__item custom_select__item-{{item.id}}" data-period="{{item.id}}">
              <span data-value="{{item.id}}" class="custom_select__title" {% if item.id not in ['past_x_days', 'next_x_days'] %}title="{{item.label}}{% endif %}">
                {% if item.id in ['past_x_days', 'next_x_days'] %}
                  {{ item.label|replace({
                    '%s': custom_period_div
                  })|raw }}
                {% else %}
                  {{item.label}}
                {% endif %}
              </span>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </div>
</div>