Home > Software engineering >  How to get value from 'flatpickr' and validate a 'flask-wtforms' form
How to get value from 'flatpickr' and validate a 'flask-wtforms' form

Time:02-10

How would I be able to validate this form (flask-wtforms) when I am using flatpickr to get dates from a user?

The form does not validate on submit when I use flatpickr to get dates from the user, which I believe is because flask does not recognise the value given by flatpickr as a valid date.

{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{% endblock head %}

{% block content %}
<div >
    <form method="POST" action="" name="datepick">
        {{ form.hidden_tag() }}
        <fieldset >
            <legend >New Rota</legend>
            <div >
                {{ form.start_date.label() }}
                {% if form.start_date.errors %}
                    {{ form.start_date() }}
                    <div >
                        {% for error in form.start_date.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.start_date() }}
                {% endif %}
            </div>
            <div >
                {{ form.finish_date.label() }}
                {% if form.finish_date.errors %}
                    {{ form.finish_date() }}
                    <div >
                        {% for error in form.finish_date.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.finish_date() }}
                {% endif %}
            </div>
        </fieldset>
        <br>
        <div >
            {{ form.submit() }}
        </div>
    </form>
</div>
{% endblock content %}
{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> 
    <script type="text/javascript">
        flatpickr("#start_date", {});
        flatpickr("#finish_date", {});
    </script>
{% endblock scripts %}

Any ideas?

CodePudding user response:

  •  Tags:  
  • Related