Calendario jQuery DateTimePicker en Formulario Django

#jQuery #datepicker #python #django #calendar

Algo muy importante al momento de trabajar con fechas y formularios, es evitar la tediosa tarea de validar si la fecha es válida o no.  Esto influye en varios fallos al momento de procesar, ya que el usuario puede ingresar texto u otro dato que no es necesariamente el formato que estamos esperando.

En este tutorial, te explicaré cómo usar un plugin (de muchos que hay por ahí) de jQuery para el manejo de fechas/horas en el FrontEnd.

Trabajaremos con XDSoft DateTimePicker, pueden encontrar la documentación en este enlace o el código fuente acá para que puedan ampliar funcionalidades.

En el curso de Desarrollo Web con Python usando Django, construimos un formulario de facturación, el cual recibe una fecha de forma manual (indicada por el usuario).

Trabajaremos la forma de integrar el plugin con un formulario de Django.  Que al final no es tan complicado, porque Django es Python y éste último trabaja bajo el principio de hacer desarrollo rápido de aplicaciones.

base.html

Este archivo es nuestra plantilla base y está ubicada en templates/base/, acá es donde haremos la primera parte del trabajo.

En el head, agregaremos la referencia a la hoja de estilo

 <!-- XDSoft DateTimePicker -->  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />  

Y al final del archivo base, agregar el llamado a la librería, eso si, deben estar pendiente que si no lo ponen como última línea, por lo menos esté después de haber cargado la librería para jQuery.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>  

Para poder permitir ingresar código javascript en las plantillas que hereden de base.html, crearemos un bloque que llamaré scripts_local y lo dejaremos vacío, el bloque lo dejé al final de la plantilla.

  {% block scripts_local %}  
  {% endblock scripts_local %}  

Con esto, ya deberíamos de poder trabajar, para esto iremos al siguiente archivo a procesar, el formulario de Django

forms.py

Acá no hay mucho que cambiar a lo que se ha hecho en el curso, sólo pondremos el input de la fecha de sólo lectura

class FacturaEncForm(forms.ModelForm):  
   fecha_factura = forms.DateInput()  
   class Meta:  
     model = FacturaEnc  
     fields = ['fecha_factura', 'observacion']  
   def __init__(self, *args, **kwargs):  
     super().__init__(*args, **kwargs)  
     for field in iter(self.fields):  
       self.fields[field].widget.attrs.update({  
         'class': 'form-control'  
       })  
     self.fields['fecha_factura'].widget.attrs['readonly'] = True  

Pueden ver que eso se logró en la última línea y campo de formulario se llama fecha_factura.

Ahora vamos a inicializar el plugin, justo en el archivo del template donde se renderiza el formulario.

factura_form.html

Acá nos iremos directamente al bloque creado en la plantilla base.
Inicializaremos el plugin, daremos formato a la fecha y quitaremos la sección de hora (time)

 {% block scripts_local %}  
 <script>  
  $(function () {  
   $("#id_fecha_factura").datetimepicker({  
       format: 'd/m/Y',  
       timepicker:false  
   });  
  });  
 </script>  
 {% endblock scripts_local %}  

El nombre usado id_fecha_factura, es del formato de django de nombrar los inputs en la plantilla, la cual es la plabra id seguido del guión bajo y el nombre del elemento del formulario.

Y listo, ya con esto deberíamos poder trabajar con el plugin jQuery los campos fechas.

Locale (Idioma)

Aunque ya está listo, sólo haría falta que muestre los datos en nuestro idioma, según la documentación, se debe invocar la función SetLocale y para que sea de forma global, lo hice en la plantilla base, al final agregué el llamado al idioma español (es), pero bien puede ser cualquier otro idioma.

   <script>  
     $(document).ready(function () {  
           jQuery.datetimepicker.setLocale('es');  
     });  
   </script>  

Y ya con esto tenemos la implementación de un plugin jQuery para el manejo del formato de la fecha en nuestro proyecto hecho en Django.


Si estás interesado en el curso, no te pierdas esta oportunidad de tenerlo con un 95% de descuento desde el siguiente botón.