{% load i18n admin_static %}
{% block extra_js %}
  {% include "wagtailadmin/shared/datetimepicker_translations.html" %}
  <script type="text/javascript">
  $(function() {
    $(".vDateField").datetimepicker({
      timepicker: false,
      format: 'Y-m-d',
      scrollInput:false,
      i18n: {
          lang: window.dateTimePickerTranslations
      },
      lang: 'lang'
    });
    $("#resetbtn").click(function(){
      $(':input','#date_range_filter').val("");
    });
  });
  </script>
{% endblock %}
<h3 class="filter__label">
  {% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}
</h3>

{% with choices.0 as i %}
<form id="date_range_filter" method="GET" action="">
  {{ spec.form.media }}
  {{ spec.form.as_p }}
  <p class="submit-row">
      {#create hidden inputs to preserve values from other filters and search field#}
  </p>
  {% for k, v in i.get_query.items %}
    <input type="hidden" name="{{ k }}" value="{{ v }}">
  {% endfor %}
  <button class="button" type="submit">{% trans "Search" %}</button>
  <button class="button" type="submit" id="resetbtn">{% trans "Clear" %}</button>
</form>
{% endwith %}
