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 manage.py startapp core

Step 3: Update setting.py

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

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

settings.py


....
INSTALLED_APPS = [

    ....

    'core',
]

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.

core/forms.py

from django import forms

class DateForm(forms.Form):
    date = forms.DateTimeField(
        input_formats=['%d/%m/%Y %H:%M'],
        widget=forms.DateTimeInput(attrs={
            '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 template.so open the core/views.py file and add:

core/views.py

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

# Create your views here.
def date_picker(request):
    context={}
    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:

core/templates/datePicker.html

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Tuts-Station.com</title>
    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <!-- Font Awesome -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
    <!-- Tempus Dominus Bootstrap 4 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
</head>

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

</html>

Step 7: Creating URLs

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

Here's what it looks like:

core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index,name='index'),
    path('date-picker',views.date_picker),
]

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.

example/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    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 manage.py runserver

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

I hope it will help you....

Previous Post
Django Vs Flask: Which Python Framework to Choose?

Next Post
Python Get Current Hour Example

Django Read and Write Text File Example

Django Ajax DELETE Request Example Tutorial

How to use Datatables in Django?

Django Ajax CRUD Example Tutorial

How to use bulk_create() in Django App?

Django Google Maps Multiple Markers Example

How to Build a Todo API in Django Rest Framework?

How to use Datepicker in Django?

Related Posts