Campo de fecha con calendario en formulario de Django

Todos los navegadores web modernos tienen la capacidad de desplegar un calendario en los campos de fecha de un formulario. Sin embargo, al querer aprovechar esta funcionalidad en un proyecto de Django hay que tener ciertas consideraciones para evitar errores en la validación del formulario. He aquí cómo hacerlo.

En primer lugar, necesitamos un formulario de Django con un campo de tipo fecha (DateField). Por ejemplo:

# Habitualmente en forms.py
from django import forms


class MyForm(forms.Form):
    name = forms.CharField(
        label="Nombre",
        required=True
    )
    date_of_birth = forms.DateField(
        label="Fecha de nacimiento",
        required=True,
        widget=forms.DateInput(format="%Y-%m-%d", attrs={"type": "date"}),
        input_formats=["%Y-%m-%d"]
    )

Aquí definimos un formulario que le solicita al usuario su nombre y su fecha de nacimiento. El campo que nos interesa es date_of_birth. La línea número 13 le indica a Django que debe generar la etiqueta HTML con el atributo type="date", que informa al navegador de que se trata de una entrada de fecha y por lo cual desplegará un calendario al hacer clic sobre él. En efecto, el código HTML generado por Django para el campo en cuestión es el siguiente:

<input type="date" name="date_of_birth" required="" id="id_date_of_birth" wfd-id="id2">

Segundo, es fundamental que el formato de fecha configurado en el formulario de Django (líneas 13 y 14) coincida con el formato definido por el estándar de HTML, a saber, aaaa-mm-dd, que según los códigos de formato de Python se expresa como %Y-%m-%d. Esto permite que Django valide correctamente la fecha ingresada y la convierta a una instancia de la clase estándar datetime.date.

Definido el formulario, en tercer lugar debemos crear una vista para mostrarlo y procesarlo. Algo como esto:

# En views.py
import datetime

from django.http import HttpRequest, HttpResponse
from django.shortcuts import render

from .forms import MyForm


def form_view(request: HttpRequest) -> HttpResponse:
    if request.method == "POST":
        form = MyForm(request.POST)
        if form.is_valid():
            # Recibir el dato de fecha ingresado por el usuario en el
            # formulario como una instancia de `datetime.date`.
            date: datetime.date = form.cleaned_data["date_of_birth"]
            # Hacer las operaciones que queramos con el dato de fecha
            # (guardarlo en una base de datos, mostrárselo al usuario, etc.).
            date_output = date.strftime("%d %b %Y")
            return HttpResponse(f"La fecha ingresada es: {date_output}")
    else:
        form = MyForm()
    ctx = {"form": form}
    return render(request, "myapp/form.html", ctx)

Lo fundamental aquí es que Django nos devuelve la fecha ingresada por el usuario en el formulario como un objeto estándar de Python, por lo cual podemos aprovechar las múltiples operaciones que provee el módulo estándar datetime.

Para completar el ejemplo, no olvidarse de la plantilla en la cual se muestra el formulario. En el ejemplo, usamos un archivo llamado form.html dentro del directorio templates/myapp (siguiendo la estructura de proyecto explicada en Iniciar y configurar un nuevo proyecto de Django):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario con campo de fecha y calendario en Django</title>
</head>
<body>
    <h3>Formulario con campo de fecha y calendario en Django</h3>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Y la configuración de direcciones de URL en urls.py:

from django.urls import path

from . import views


urlpatterns = [
    path("form", views.form_view, name="form_view")
]

Campo de fecha con calendario en formulario de Django

Artículos relacionados

Curso online 👨‍💻

Consultoría 💡

Deja una respuesta Cancelar la respuesta