join_menstrual_predictor.html

{% extends "base.html" %}
{% block content %}
    <div class="container">
        <h3>Please fill in your details</h3>
        <form method="post">
            <div class="row">
                <label for="avg_period_length" class="col-sm-2 col-form-label">Average period length</label>
                <div class="col-auto">
                    <input type="number" class="form-control" name="avg_period_length" id="avg_period_length" min=1 placeholder="Required" autofocus required><br>
                </div>
                <div class="col-auto">
                    <span id="PeriodLengthHelpInline" class="form-text">
                        Must be above 1 day.
                    </span>
                </div>
            </div>
            <div class="row">
                <label for="last_period_date" class="col-sm-2 col-form-label">Last period date</label>
                <div class="col-auto">
                    <input type="date" class="form-control" name="last_period_date" id="last_period_date" placeholder="Required" required><br>
                </div>
            </div>
          
            <input type="submit" class="btn-sm btn btn-outline-primary" value="Sign Up">
        </form>
    </div>
    <script>
        function change_max_to_today_date(el){
            today = new Date();
            today_str = today.toISOString().substring(0,10);
            el.max = today_str;
        }
        function validate_date_older_than_today(received_date){
            return received_date < new Date();
        }
        let last_period_date_element = document.getElementById('last_period_date');
        change_max_to_today_date(last_period_date_element);
    </script>
{% endblock %}