Skip to content

DatePicker and DatetimePicker does not work from unknown reason. #124

Open
@Draqun

Description

@Draqun

Describe the bug
I created a form with a date selector using a package and it doesn't work. But the strangest thing is that the time selector works perfectly.

Also links to configuration instruction from Troublshooting does not work.

To Reproduce

  1. I have project made in Django 5.1 but when I downgraded to 5.0.9 it also does not work.
  2. I checked jQuery 1.12.4 and 3.7.1.
  3. I uses ModelForm

Code
Form:

from django.forms import ModelForm
from bootstrap_datepicker_plus.widgets import DatePickerInput, TimePickerInput

from sfe.tenant.models.due_date import DueDate


class DueDateForm(ModelForm):
    class Meta:
        model = DueDate
        fields = ["date", "time", "name", "comment"]
        widgets = {"date": DatePickerInput(), "time": TimePickerInput()}

Model:

from django.db import models
from django.utils.translation import gettext_lazy as _


class DueDate(models.Model):
    date = models.DateField(verbose_name=_("Date"))
    time = models.TimeField(
        verbose_name=_("Hour"),
        blank=True,
        null=True,
    )
    name = models.CharField(
        verbose_name=_("Name"),
        max_length=150,
        unique=True,
    )
    comment = models.TextField(verbose_name=_("Comment"))
    created_on = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

Template

...
    <div class="row">
        <div class="col">
            {{ form.media }}
            <form class="form" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                {% bootstrap_form form %}
                <div class="d-none d-lg-block d-xl-block">
                    {% bootstrap_button _("Add") button_type="submit" button_class="btn btn-primary" %}
                    <a href="{% url 'tenant:due_date_list' %}" class="btn btn-light">{% trans 'Cancel' %}</a>
                </div>
                <div class="d-lg-none d-xl-none">
                    <div class="d-grid gap-2">
                        {% bootstrap_button _("Add") button_type="submit" button_class="btn btn-primary btn-lg" %}
                        <a href="{% url 'tenant:due_date_list' %}" class="btn btn-light btn-lg">{% trans 'Cancel' %}</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
...

Expected behavior
Modal show up.

Screenshots
DatePicker does not works
image
TimePicker works
image

Setup Information (please complete the following information):

  • OS: Ubuntu 24.04
  • Browser: Edge 124.0.2478.67 and Firefox 132.0.2
  • Python version: 3.13
  • Django version: 5.1.3 and 5.0.9
  • Bootstrap version: 5.1
  • jQuery version: 1.12.4 and 3.7.1

[x] I have followed the configuration instructions and checked out the
common error troubleshooting page.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions