datetime picker does not work correctly when used in inlines (tabular or stacked)

[carlosfvieira]

for the existing records, datetime picker works well, but if add another row, the datetime picker does not work correctly -> it shows Ok, but if clicked on the field or on the buttons, the datetime picker window does not show up.

I've tried to initialize datetime picker using livequery jquery plugin, but still does not work...

[carlosfvieira]

Hey, any ideas? Thanks!

[JensAstrup]

Are any errors showing up in Chrome Dev Console?

[carlosfvieira]

Hi @JensAstrup , no errors! It's simply silent... either clicking on date or time inputs or date or time buttons, nothing happens, and no error is shown!

Any idea of what's happening?

[JensAstrup]

I hadn't noticed this issue before, but just tried it myself and ran into the same problem. I'm going to do some digging - will let you know if I find anything.

[carlosfvieira]

Thanks @JensAstrup !

[JensAstrup]

Well, I have an idea of where the problem is coming from - but it will take some more digging around to figure out the solution.

I believe the Django datepicker needs to be initialised after clicking 'Add Another ...' - the question is what function to call and in what file. The relevant javascript files are in django-jet/jet/static/admin/js/ if you want to take a look around. There may also be some clues in the default django admin files as they are using the same datepicker, but without the same issue.

[carlosfvieira]

I've already tried that, using a solution like this (using jquery livequery plugin):

$(".datepicker").livequery(
        function(){ 
            // This function is called when a new object is found. 
            $(this).datepicker({ ...}});
        }, 
        function() { 
            // This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function.
        }
); 

but, no luck :\

[JensAstrup]

Do you get any results just using $(".datepicker")? When I use that class I get nothing, may need a different selector?

[carlosfvieira]

.datepicker here was just an example of a selector... what i do is, using the correct selector for date and time (vDateField and vTimeField), initialize datepicker and timepicker, like is being done e initDateWidget function, in main.js (or main.min.js)

still can't get it to work...i can get it enter the event when field is created (using the livequery plugin), but still can't make it to work...

[fproldan]

Hi! Any updates about this issue?

Thanks

[pabgn]

This issue is still present, and the only way to "fix" it is by adding extra = 1 to the inlines that use datepicker.

[pabgn]

Hey everyone,

This is the code I'm using to fix this issue.

On my ModelAdmin:

    class Media:
        js = ('/static/admin/js/fix_calendar.js',)

In fix_calendar.js:

function djangoDateTimeFormatToJs(format) {
        return format.toLowerCase().replace(/%\w/g, function(format) {
            format = format.replace(/%/,"");
            return format + format;
        });
}

django.jQuery(document).on('click', '.inline-navigation-item, .add-row', function(){
        jet.jQuery(".vDateField").removeClass('hasDatepicker').datepicker({
                showButtonPanel: true,
                nextText: '',
                prevText: '',
                dateFormat: djangoDateTimeFormatToJs(DATE_FORMAT)
            });
    });

[SalahAdDin]

@pabgn hey, can you make a PR for fix this error? @f1nality Can you fix this problem?

[Ismael-VC]

Please come to the django-jet Discord server so we can organize if you like:

• https://discord.gg/3yr5yeH

Welcome! 😄

[SalahAdDin]

@carlosfvieira @pabgn What's about the last version? Does it fixed this problem?

[carlosfvieira]

@SalahAdDin , i did not test it on last version

[SalahAdDin]

@carlosfvieira Did you try put these code in the javascript bundle?

[carlosfvieira]

@SalahAdDin , nope :\

[SalahAdDin]

@carlosfvieira Why? If you can't do it i can do it but i don't know how can i test it.

[denny-sam]

@carlosfvieira Hi, how did you come up with this datetimepicker? What module is it?

[AhmadEbeid]

Any new solution is presented ?

[SalahAdDin]

@AhmadEbeid THis package was deprecated.

[khanchi97]

Hi, any solution so far? I've tried above mentioned JS change, but couldn't make it work.

[fgplastina]

Hi, any solution so far? I've tried above mentioned JS change, but couldn't make it work.

I think it won't be any solution here but you can try on django-jet 4 repo.

[khanchi97]

Thanks, @fgplastina, but I forgot to update, we made it work using JS, which adds an event listener for click and initializes the timepicker ("timepicker" because it was only the time field in our case)

window.addEventListener("load", function () {
  document
    .querySelectorAll("a.add-handler.djn-add-handler")
    ?.forEach((element) => {
      element.addEventListener("click", function () {
        jQuery(".vTimeField").removeClass("hasTimepicker").timepicker();
      });
    });
}

[fgplastina]

@khanchi97 thanks for your reply, this may help a lot!!