Widget DateTimePicker targets the wrong form

[rob70]

I have set up a working formset with your script. It improves the usability of my project.

However, two of the fields in my form uses the widget bootstrap datetimepicker to fill in the datetime fields. The script of the widgets targets their respective fields with this code:

$("#id_form-0-name_of_datetimefield_picker")

When your script adds a new form to the formset, this piece of code is not correctly updated, so every new widget refers to the form-0 field and not the form-1, form-2 and so on.

The datetimepicker widget works correctly with the regular formset.

A similar issue is reported at Stack Overflow a few years back and also a suggested workaround: http://stackoverflow.com/questions/6719063/when-adding-a-new-inline-to-my-formset-my-datepickers-stop-working

The workaround suggests that when the django-dynamic-formset script is completed, it should trigger a function that renewed the datetimepickers.

Question: Is there a way to construct the form and get this widget right the first time around?

For reference, the datetimepicker project is found here: https://github.com/Eonasdan/bootstrap-datetimepicker

[elo80ka]

@rob70 Apologies; just re-read your question, and I understand you're asking if it's possible to have this work without destroying and re-initializing the date pickers each time you add or remove a form. I'd have to say, I don't think so. The additional forms are created, either by cloning the last form in the formset, or a form template, if specified. That means you'd either have to remove and re-init the date picker (in the former case), or add it to the new form (in the latter). I don't know of any way to work around that.

[rob70]

@elo80ka Yes, my knowledge of javascript is somewhat rudimentary so I wondered if there was a clean solution like that.

I guess the solution will be along the lines of the post at Stack Overflow referred to above then. If no one beats me to it I'll see if I can come up with a working solution.

[youreabear]

@rob70 I just encountered the exact same problem with the project I'm working on. I tried the workaround suggested on Stack Overflow (destroy and enable) without any success. Perhaps I'm doing it wrong. Did you end up solving your problem? If so, do you mind sharing your code? Thank you, I would really appreciate your help!

[elo80ka]

@youreabear It's been a while since that issue was posted. Could you describe your setup - maybe, link to a Gist with some code? There might be a better solution available now.

[youreabear]

@elo80ka I have a model formset set up using your library along with Crispy Forms and Tempus Dominus. Here's the Gist: https://gist.github.com/youreabear/fbe92b946349d7865dfe65b721247368

My datepicker works correctly with a non-dynamic formset but when a new form is added to the formset, the widget ends up targeting the last form in the formset that it was cloned from and not the current form. Instead of incrementing properly (i.e. form_1, form_2, etc.), it just refers to the last form of the formset (i.e. form_0) before the new ones are added.

As you can see in line 19 of my opex.html in Gist, I'm attempting to implement the destroy and re-initialize function as suggested on Stack Overflow but I'm a JS noob so I'm not sure how to proceed.

[pije76]

Any update for this iisue?

[cpina]

@pije76 and others : I'm just a user of django-dynamic-formset. I can't remember the full details but I had a similar problem and currently I'm using the 'added' of the django-dynamic-formset to call a few functions to fix the behaviour of the new row: for example for the file fields I might de-attach the file (since it's a clone it has the files attached), etc.

I'm checking my code and I have something like:

$(row).find('.xdsoftyearmonthdaypickerinput').each(function (i, value) {
        $(value).datetimepicker({
                timepicker: false,
                format: 'd-m-Y',
                scrollInput: false,
                dayOfWeekStart: 1
            }
        );
    }
);

In order to re-attach the date time widget that I chose (instead of the tempus one) into the widgets. It's called from the 'added' on the django-dynamic-formset.

Maybe this helps.

[pije76]

@cpina Thank you for your information... Btw I solved by using django-datetimepicker-plus with this code:

$(yourVariable).find('#yourID_or_.yourClass')
    .removeClass('datepickerinput').removeData('DateTimePicker')
    .unbind().datetimepicker(
        options={
            "format": "DD/MM/YYYY",
        }
    );