<div class="dialog-box date-range-box">
   <form id="date-range-form"
         action="{% url lizard_map_date_range %}"
         method="post">
    {% csrf_token %}
    <p>{% autoescape off %}{{ view.date_range_form.period }}{% endautoescape %}</p>
    <p>
      <label for="id_dt_start">Van:</label>
      {{ view.date_range_form.dt_start }}
      <label for="id_dt_end">Tot:</label>
      {{ view.date_range_form.dt_end }}
    </p>
    <div><input id="date-range-submit" type="submit" value="opslaan"/></div>
  </form>
</div>

{# Animation slider html code is the same as in wms.html #}
{% if view.animation_slider %}
<li id="animation-slider"
    class="map-action"
    data-min="{{ view.animation_slider.min }}"
    data-max="{{ view.animation_slider.max }}"
    data-step="{{ view.animation_slider.step }}"
    data-value="{{ view.animation_slider.value }}"
    data-ajax-path="{% url lizard_map.set_animation_date %}">
</li>
<li id="animation-date" class="map-action">
  <span id="selected-date">{{ view.animation_slider.selected_date|date:"d/m/Y" }}</span>
</li>
{% endif %}
