How to use Datepicker in Django?
Hi Dev,
This tutorial shows you how to use a DatePicker in Django. I’ll walk you through the steps on how to integrate DatePicker using Bootstrap and Tempus Dominus. You’ll be able to easily apply it in your Django project, even though DatePicker itself is not Django-specific. It’s a simple jQuery library, and we’ll use Tempus Dominus for a smooth datetime selection experience.
Let’s dive into the steps:
Step 1: Create a ProjectStart by creating a new Django project. Open your command line and type:
django-admin startproject exampleStep 2: Create an App
Create an app named core to handle our DatePicker functionality. Run the following command:
python3 manage.py startapp coreStep 3: Update settings.py
Now, add your app to the INSTALLED_APPS section in the settings.py file:
settings.py
INSTALLED_APPS = [
# Other installed apps
'core',
]
Step 4: Create a Form
Create a form in core/forms.py that will use the Tempus Dominus DatePicker widget. It will look like this:
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: Create the Views
Next, let’s create the view that will render the form in core/views.py:
core/views.py
from django.shortcuts import render
from .forms import DateForm
def date_picker(request):
context = {'form': DateForm()}
return render(request, 'datePicker.html', context)
Step 6: Create the Templates
Now, let’s create a template for rendering the form and the DatePicker. In core/templates/datePicker.html, add the following:
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>How to Use Date Picker in Django</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">
<!-- 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?</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: Configure URLs
Create a core/urls.py file to define URL routes. Then include these in the main example/urls.py file:
core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('date-picker', views.date_picker),
]
example/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')),
]
Step 8: Run the Server
Run the Django server to see your DatePicker in action. Use the following command:
python manage.py runserver
Visit http://localhost:8000/date-picker to see the result.
I hope this helps! Now your DatePicker is ready to use in Django!
Frequently Asked Questions (FAQ)
1. What is Tempus Dominus DatePicker?
Tempus Dominus is a powerful DatePicker plugin that works perfectly with Bootstrap 4 for easy and responsive date/time selection.
2. Can I use other DatePickers in Django?
Yes, you can use any other DatePicker libraries, such as jQuery UI DatePicker or Flatpickr, in Django. The integration approach will be similar.
3. How can I customize the date format in Tempus Dominus?
You can easily customize the date format by changing the input_formats in the Django form's DateTimeField.
4. Is Tempus Dominus mobile-friendly?
Yes, Tempus Dominus is fully responsive and works perfectly on mobile devices.
Happy coding!