Django Bootstrap Datepicker In Modal Tutorial

Rendering a Bootstrap Datepicker inside a modal using the bootstrap-datepicker-plus package for Django can sometimes cause some issues based on the order your page loads your scripts. Using a context processor that gives every template access to the form’s media should solve the issue.

I am using Django 3.1 and using Javascript and Ajax to load and submit the form. Here is a quick tutorial:

1. Install Django Bootstrap Datepicker using pip install django-bootstrap-datepicker-plus and follow the package installation instructions

2. Create your form and load the DatePicker widget. In this example I am using a generic Django Form. If you’re using a Model Form, follow the instructions from the package installation link above

from django import forms
from bootstrap_datepicker_plus import DatePickerInput
 
EVENT_TYPE_CHOICES = [
     ("Wedding", "Wedding"),
     ("Bar/Bat Mitzvah", "Bar/Bat Mitzvah"),
     ("Corporate", "Corporate"),
     ("Private Party", "Private Party"),
]
 
class RequestQuoteForm(forms.Form):
       name = name = forms.CharField(max_length=100)
       email = forms.EmailField()
       phone = forms.CharField(max_length=15)
       event_date = forms.DateField(widget=DatePickerInput(format="%m/%d/%Y"), label="Event Date")
       event_type = forms.ChoiceField(choices=EVENT_TYPE_CHOICES, label="Event Type")

3. Create a Context Processor

Inside your app directory create a new file called context_processors.py 

from .forms import RequestQuoteForm

def quote_form_processor(request):
     quote_form = RequestQuoteForm()
     return {'quote_form': quote_form}

4. In your settings.py add the context processor to your TEMPLATES

TEMPLATES = [
        {
            "BACKEND": "django.template.backends.django.DjangoTemplates",
            "DIRS": [str(BASE_DIR.joinpath("templates"))],
            "APP_DIRS": True,
            "OPTIONS": {
                   "context_processors": [
                          "django.template.context_processors.debug",
                          "django.template.context_processors.request",
                          "django.contrib.auth.context_processors.auth",
                          "django.contrib.messages.context_processors.messages",
                          "pages.context_processors.quote_form_processor",
                     ],
               },
         },
   ]

5. Load the media in your base.html template. NOTE: Make sure the form name matches the name you set in your context processor.

{{quote_form.media}}

6. Write your function based view

from django.http import JsonResponse
from django.template.loader import render_to_string
 
def request_quote(request):
    data = dict()
    if request.method == "POST":
         form = RequestQuoteForm(request.POST or None)
         if form.is_valid():
 
             data["html_success_message"] = render_to_string(
                   "pages/includes/partial_quote_submit_success.html", request=request,
              )
             data["form_is_valid"] = True

        else:
             data["form_is_valid"] = False
    else:
         quote_form = RequestQuoteForm()
         data["html_form"] = render_to_string(
               "pages/includes/partial_quote_form.html",
                {"quote_form": quote_form},
                request=request,
                )
return JsonResponse(data)

7. In your static folder create a file named custom.js and load file in the footer of your base.html template

$(function () {

      /* Functions */

      var loadForm = function () {
         var btn = $(this);
         $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
               $("#modal-base .modal-content").html("");
               $("#modal-base").modal("show");
             },
          success:function (data) {
              $("#modal-base .modal-content").html(data.html_form);
          }
      });
   };

var saveForm = function () {
     var form = $(this);
     $.ajax({
         url: form.attr("action"),
         data: form.serialize(),
         type: form.attr("method"),
         dataType: 'json',
         success: function (data) {
            if (data.form_is_valid) {
                $("#modal-base .modal-content").html(data.html_success_message);
            }
            else {
               $("#modal-base .modal-content").html(data.html_form);
            }
       }
    });
    returnfalse;
};


   /* Binding */


   // Request Quote
   $(".js-quote-request").on("click", loadForm);
   $("#modal-base").on("submit", ".js-quote-request-form", saveForm);

});

8. Create your form template and load the form media again

{{quote_form.media}}
<form method="POST" action="{% url 'request_quote' %}" class="js-quote-request-form" id="quoteForm">
     {% csrf_token %}
     <div class="modal-header">
         <h4 class="modal-title">Request a Quote</h4>
      </div>
      <div class="modal-body">
          {% bootstrap_form_errors quote_form %}
          {% bootstrap_form quote_form %}

      </div>
      <div class="modal-footer">
          <button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
          {% bootstrap_button "Schedule" button_type="submit" button_class="btn-primary"%}
     </div>
</form>

9. Create your success template

<div class="modal-header">
      <h4 class="modal-title">Quote Request Sent</h4>
</div>
<div class="modal-body">
        Thank you for submitting your form! We will be in touch soon!

</div>
<div class="modal-footer">
    <button  type="button"class="btn btn-default"data-dismiss="modal">Close</button>
</div>
 

10. Add the modal to your base.html template

<div class="modal fade" id="modal-base">
   <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
       </div>
    </div>
</div>

11. Render your modal from any template using a button

<button data-url="{% url 'request_quote' %}" class="btn btn-lg btn-primary js-quote-request">Request a Quote</button>