How to use Datepicker in Django?

Published On: 30/08/2022 | Category: Django

Hi Dev,

This tutorial shows you how to use datepicker in django. I explained simply step by step how to use datepicker with django. let’s discuss about django bootstrap datepicker example. I explained simply about django bootstrap datepicker example tutorial.

Datepicker is nothing related to django, it is a separated jquery library. you can simply use datepicker in django app as you use on another framework. In this example i use tempusdominus datepicker js library for datepicker..

Here i explained simply step by step example of how to use date picker in django.

Step 1: Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example
Step 2: Create a App

Now we'll create a single app called core to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python3 startapp core
Step 3: Update

Next, then update INSTALLED_APPS within our file to notify Django about the app.

Next, you need to add it in the file as follows:


Step 4: Create a Form

In this step We need to create a form that will be used .like add a bootstrap class for our datepicker etc.. plus we need to add custom styling.

from django import forms

class DateForm(forms.Form):
    date = forms.DateTimeField(
        input_formats=['%d/%m/%Y %H:%M'],
            'class': 'form-control datetimepicker-input',
            'data-target': '#datetimepicker1'
Step 5: Creating the Views

In this step, we need to configure our views. The date_picker page will just be a open the core/ file and add:

from django.shortcuts import render
from .form import DateForm
from django.http import HttpResponse

# Create your views here.
def date_picker(request):
    context['form']= DateForm
    return render(request,'datePicker.html',context) 
Step 6: Creating the Templates

Next, then with your text editor create new templates files: core/templates/datePicker.html file and the add:

<!doctype html>
<html lang="en">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <!-- Font Awesome -->
    <link href="" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Moment.js -->
    <script src=""></script>
    <!-- Tempus Dominus Bootstrap 4 -->
    <link rel="stylesheet" href="" />
    <script src=""></script>

    <div class="container mt-5 pt-5">
        <h2>How to Use Date Picker in Django? - <span class="text-primary"></span></h2>
        <div class="row">
            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                {{ }}
                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        $(function () {

Step 7: Creating URLs

In this section, we need a file within the core app however Django doesn't create one for us with the startapp command. Create core/ Note as well that we set an optional URL name for each.

Here's what it looks like:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index,name='index'),

Next, we require to add a URL path for our example app which can be done by importing include and setting a path for it.

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

urlpatterns = [
    path('', include('core.urls')),
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/date-picker address with a web browser.

I hope it will help you....