Unable to select time when using DatetimePickerInput

[kokann-gdex]

Describe the bug
When using DatetimePickerInput, I was not able to select the time by clicking on the clock icon under the calendar.

To Reproduce
Steps to reproduce the behavior:

1. Follow the walkthrough: https://django-bootstrap-datepicker-plus.readthedocs.io/en/latest/Walkthrough.html
2. visit the page "polls/1/update"
3. Click on the calendar icon beneath "Date published" field
4. Click on the clock icon on the calendar drop down.
5. The time selector showed for a brief period and user was unable to select the time.

Expected behavior
I should be able to select the time after clicking on the clock icon on the calendar drop down

Screenshots

Setup Information (please complete the following information):

• OS: Ubuntu 22.04.2 LTS
• Browser: Firefox
• Browser version: 113.0.1 (64-bit)
• Python version: 3
• Django version: 3.2.18
• Bootstrap version: 4
• jQuery version: 3.5.1

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

Full video:
Screencast from Rabu 07 Jun 2023 10:19:52 AM +08.webm

[christianwgd]

Since this is working fine for me, I would start with looking at your browser console. Is there any error message showing up?

I looked at your screen cast and and was a little bit puzzled because the time picker is sliding downwards from the date picker. I'm used to the time picker sliding over the date picker. You can check this behaviour at https://getdatepicker.com/4/.

Which version of Bootstrap do you use?

[pcd1000]

I have the same issue. I have reproduced this in Chrome, safari and Mozilla.
There are no console errors.

Uploading Screen Recording 2023-06-14 at 11.08.19.mov…

[christianwgd]

Hey guys, I've created a minimal example to check the issue for me:
https://github.com/christianwgd/date_time_picker_sample
Everything is still working as it should. Checked also against the walkthrough but I don't recognise any major difference that could cause your problem.
Can you please check, if the sample is working for you?

[pcd1000]

Hello Christian, many thanks for the quick response.
I tried your version, which worked perfectly. I will compare it to my code and revert to you.
One question, while I have your attention! Is there a way of limiting the minutes to 10 minute intervals? Something like:
options={ "format": "HH:mm", 'enabledMinutes': [00, 10, 20, 30, 40, 50], }

[christianwgd]

You can use the "stepping" option:

widgets = {
    'timestamp': DateTimePickerInput(
        options={
            # https://getdatepicker.com/4/Options/#format
            'format': 'MM/DD/YYYY HH:mm',
            # https://getdatepicker.com/4/Options/#stepping
            'stepping': 10
        }
    )
}

This will allow users to scroll in ten minutes steps through the time picker.

I added that also in the sample.

[pcd1000]

Hi Christian,

My bad, I had the following incorrect template:

`
{% extends "blah/base.html" %}

{% load i18n %}
{% load crispy_forms_tags %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{% block inner %}
{{ form.media }}

{% csrf_token %}
{{ form|crispy }}


{% endblock %}
**Whereas, it should have been:**
{% extends "blah/base.html" %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block head %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}
{% endblock %}

{% block inner %}

{% csrf_token %}
{{ form|crispy }}


{% endblock %}
`
Many thanks for the 'stepping' suggestion!

[dattpatel99]

I got the same issue but doing that didn't solve it for me

[monim67]

@dattpatel99 a lot of users reported it, I was unable to reproduce the issue. Do you have anything so that I can reproduce the issue?

[pcd1000]

Hello christianwgd and monim67;

I tested the https://github.com/christianwgd/date_time_picker_sample repository and everything functioned perfectly (including the time dropdown). So, I don't think that it's a browser issue. But when trying to recreate the same structure in my project had no success.

To try to give you some insight into the problem, I cloned the Django-polls https://github.com/monim67/django-polls repository, then followed your https://django-bootstrap-datepicker-plus.readthedocs.io/en/latest/Walkthrough.html instructions, but in the end although the datepicker part worked, the time dropdown immediately snaps shut and then won't open again.
Here is the repository to the polls-django code that is causing the issue:
https://github.com/pcd1000/django-polls
Maybe this will be of some help to you?

[baranma75]

I had the same error, after insertion from.media as below (inside in form):

<form method="post" class="pt-md-3"> <fieldset> {% csrf_token %} {{ form.media }} {% bootstrap_form form %} {% bootstrap_button button_type="submit" content="OK" %} {% bootstrap_button button_type="reset" content="Reset Form" %} </fieldset> </form>

all works :)

[pcd1000]

Thank you baranma75, I tried your suggestion, but the time dropdown still keeps snapping shut.
If anyone has time, I would really appreciate an explanation as to why the django-polls project, that I hope was configured correctly in accordance with the datetimepicker plus Walkthrough instructions, isn't working: https://github.com/pcd1000/django-polls

[christianwgd]

Ok, cloned your project and changed your question_form.html to look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    {{ form.media.css }}
</head>

<body>
    <div class="container">
        <div class="col-md-3">
        <form method="post">{% csrf_token %}
            {% bootstrap_form form %}
            {% buttons %}
            <button type="submit" class="btn btn-primary">Save</button>
            {% endbuttons %}
        </form>
        {{ form.media.js }}
        </div>
    </div>
</body>
</html>

So move the javascript from head. Works for me like that.

[christianwgd]

And maybe you should create a base template and take a look into the django-bootstrap4 docs how to use their templates.

[baranma75]

I checked on my own project. {{form.media}} must be in a div containing the form, then it works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
  
</head>
<body>
    <div class="container">
        <div class="col-md-3">
  {{ form.media }}
        <form method="post">{% csrf_token %}
            {% bootstrap_form form %}
            {% buttons %}
            <button type="submit" class="btn btn-primary">Save</button>
            {% endbuttons %}
        </form>
        </div>
    </div>
</body>
</html>

[christianwgd]

Please be aware that I splitted the form media to form.media.css (which should stay in head) and form.media.js.

[pcd1000]

Many thanks Christian, I am working through your example and if I have any questions, I'll revert.
A fantastic app, by the way, thank you for all of your hard work!

[christianwgd]

@pcd1000 please note, that I'm not the creator of this app, so credit goes to @monim67

[rishil321]

I'm not sure what causes this issue, but the best workaround I found was to use the side-by-side option.

widgets: dict[str, Any] = { "estimated_time_of_departure": DateTimePickerInput( options={"sideBySide": True} ) }