How to Use Bootstrap Datepicker, Timepicker and Datetimepicker in Django

Bootstrap Datepicker and Datetimepicker are handy tools for enhancing date and time input fields in your Django forms. They provide user-friendly date and time selection widgets. In this tutorial, we’ll walk through the steps to integrate Bootstrap Datepicker and Datetimepicker into your Django project, complete with practical examples.

Read our Blog on How to Integrate and Use Bootstrap 5 in Django

Prerequisites

Before we begin, ensure you have the following prerequisites in place:

Django Installed: You should have Django installed on your system. You can install it using pip:

   pip install django

Bootstrap and jQuery: Make sure you have included Bootstrap and jQuery in your project. You can either download and include them in your project manually or use a Content Delivery Network (CDN) in your HTML template.
Basic Django Project: You should have a basic Django project set up. If you haven’t created one yet, you can do so by running:

   django-admin startproject myproject

Replace myproject with your project’s name.

Step 1: Create a Django App

Let’s start by creating a Django app within your project. Run the following command:

python manage.py startapp myapp

Now, add the newly created app, myapp, to your project’s INSTALLED_APPS in the settings.py file.

# myproject/settings.py

INSTALLED_APPS = [
    # ...
    'myapp',
    # ...
]

Step 2: Create a Model

In this example, we’ll create a simple model to represent events with date and time fields. Open myapp/models.py and define the model as follows:

from django.db import models

class Event(models.Model):
    name = models.CharField(max_length=100)
    date = models.DateField()
    time = models.TimeField()
    datetime = models.DateTimeField()

Don’t forget to run migrations to create the database table for this model:

python manage.py makemigrations
python manage.py migrate

Step 3: Create a Form

Now, create a form for the Event model. In myapp/forms.py, add the following code:

from django import forms
from .models import Event

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        fields = ['name', 'date', 'time', 'datetime']
        widgets = {
            'date': forms.DateInput(attrs={'class': 'datepicker'}),
            'time': forms.TimeInput(attrs={'class': 'timepicker'}),
            'datetime': forms.TextInput(attrs={'class': 'datetimepicker'}),
        }

In the EventForm class, we specify the widgets attribute for the date, time, and datetime fields, assigning CSS classes datepicker, timepicker, and datetimepicker to each field, respectively. These classes will be used to initialize the Bootstrap Datepicker and Datetimepicker.

Step 4: Create a Template

Create an HTML template for your form. Inside the myapp directory, create a folder named templates if it doesn’t already exist, and within it, create a new HTML file, e.g., event_form.html. In this file, you can use the following code:

{% extends 'base.html' %}

{% block content %}
  <h2>Create an Event</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
  <script>
    $(document).ready(function() {
      $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
      });

      $('.timepicker').timepicker({
        format: 'hh:ii:ss',
        autoclose: true,
        showMeridian: false,
      });

      $('.datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        showClear: true
      });
    });
  </script>
{% endblock %}

Here, we’re extending a base template (base.html) and rendering the form fields using {{ form.as_p }}. Additionally, we include a script at the end to initialize the Bootstrap Datepicker, Timepicker, and Datetimepicker for the respective fields with the classes datepicker, timepicker, and datetimepicker.

Here’s an example of a base.html file that you can use as a template for your Django project, which includes the necessary CSS and JavaScript libraries for Bootstrap Datepicker, Timepicker, and Datetimepicker:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Include jQuery (required for Bootstrap JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <!-- Include Bootstrap JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <!-- Include Bootstrap Timepicker CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
    <!-- Include Bootstrap Datetimepicker CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>

    <div class="container mt-5">
        {% block content %}
        <!-- Content goes here -->
        {% endblock %}
    </div>

    <!-- Custom JavaScript (if needed) -->
    {% block javascript %}{% endblock %}
</body>
</html>

Step 5: Create Views and URLs

In myapp/views.py, create views for rendering the form and handling form submissions:

from django.shortcuts import render, redirect
from .forms import EventForm

def create_event(request):
    if request.method == 'POST':
        form = EventForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('event_list')  # Replace 'event_list' with your desired redirect URL after successful form submission
    else:
        form = EventForm()
    return render(request, 'event_form.html', {'form': form})

Additionally, you can create a view to display a list of events, but that’s beyond the scope of this example.

Next, define URL patterns in myapp/urls.py to route requests to these views:

from django.urls import path
from . import views

urlpatterns = [
    path('create_event/', views.create_event, name='create_event'),
    # Define other URLs as needed
]

Step 6: Include URLs in Project’s URLs

In your project’s urls.py (located in the main project directory), include the URLs of your app like this:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myapp/', include('myapp.urls')),
]

Step 7: Run the Development Server

Finally, start the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/myapp/create_event/ in your web browser to see the form with the Bootstrap Datepicker, Timepicker, and Datetimepicker in action.

Congratulations! You’ve successfully integrated Bootstrap Datepicker and Datetimepicker into your Django project, allowing users to input dates, times, and datetimes with ease. Customize the format, options, and icons as needed to match your projact’s requirements and styling preferences.

Find this tutorial on Github.