Implementar un datepicker en Flask

Vamos a implementar de forma muy básica un datepicker en Flask, para un par de campos de formulario tipo input, para realizar consultas por fecha a una base de datos MySQL.

Para comenzar, debemos instalar WTForms:

sudo pip install flask-WTF

Así queda nuestro código en el main.py:

from flask import Flask, request, Response, render_template, redirect, flash, url_for
from flask_wtf import Form
from wtforms.fields import DateField
import modelo


app = Flask(__name__, template_folder='templates')
app.secret_key = "clavesecreta"


//CREAMOS UNA CLASE PARA EL FORMULARIO PEQUEÑO QUE CONTIENE DOS CAMPOS, UNO PARA LA FECHA INICIAL Y EL OTRO PARA LA FECHA FINAL
class FechaForm(Form):
    dt = DateField('DatePicker', format='%Y-%m-%d')
    dt2 = DateField('DatePicker', format='%Y-%m-%d')


//RENDERIZAMOS EL INDEX CON EL FORMULARIO QUE CONTIENE LOS CAMPOS DE FECHA
@app.route("/")
def inicio():
    form = FechaForm() //Instanciamos la clase
    return render_template("index.html", form=form)


//RECIBIMOS LAS FECHAS SELECCIONADAS POR EL USUARIO, LAS CONSULTAMOS EN LA BD Y RENDERIZAMOS EL RESULTADO
@app.route("/consulta")
def consulta():
    fecha1 = request.form["dt"]
    fecha2 = request.form["dt2"]
    result = modelo.obtener_registros(fecha1, fecha2)
    return render_template("resultado.html", listado=result)

 

Luego en el index.html dibujamos el formulario con los campos de fecha:

<table>
<tr>
<form action="{{ url_for('consulta') }}" method="post">
    <td>{{ form.dt(class='datepicker') }}
    <td>{{ form.dt2(class='datepicker') }}
    <input type="submit" value="CONSULTA"/>
</form>
</tr>
</table>

y queda así:

Ahora el consulta.html que nos muestra el resultado de la consulta:

<table class="table table-hover">
<tr class="colorencabezado">
<td>FACTURA<td>IP<td>FECHA</td>
{% for i in listado %}
<tr>
    <td>{{ i[0] }}</td>
    <td>{{ i[1] }}</td>
    <td>{{ i[2] }}</td>
</tr>
{% endfor %}
</table>

Puede que te interese ver cómo exportar datos de MySQL con Flask.

---

Valora este artículo:

Nombres
Email
Titulo
Calificanos
Contenido

Comparte esto en