{% extends 'layouts/base.html' %}


{% block title %}Daterange page{% endblock %}

{%block head %}
{{ super() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
{% endblock %}
{% block basecontent %}
    {% block content %}
    <div class="lm-FieldGroup-label"><span
        class="lm-Heading lm-Heading2 lm-Heading2--light lm-typography-align-inherit lm-FieldGroup-name">Select date range for data recovery:</span>
    </div>
    <form method="POST">
        <label for="startdate">Start Date and Time:</label><br>
        {{form.startdate}}<br/>
        <label for="enddate">End Date and Time:</label><br>
        {{form.enddate}}<br/><br/>
        {{ form.submit() }}
    </form>
    {% endblock %}

    {% block scripts %}
    {{ super() }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
        $('#startdate').datetimepicker();
        $('#enddate').datetimepicker();
        });
    </script>
    <!-- Services End -->
    {% endblock %}
{% endblock %}