0

I have installed in my app the tempus_dominus app, usuing in the following manner: 

from tempus_dominus.widgets import DatePicker, TimePicker, DateTimePicker

class InformazioniGeneraliForm(forms.ModelForm):
    data_registrazione=forms.DateTimeField(widget=DatePicker(attrs={
                'append': 'fa fa-calendar',
                'icon_toggle': True,
            }))

And in my template utilized in the following manner: 

{{ form.media }}
<div class="row">
                 <div class="form-group col-2 0 mb-0" >
                     {{form.codice_commessa|as_crispy_field}}
                 </div>
                 <div class="form-group col-2 0 mb-0" >
                     {{form.data_registrazione|as_crispy_field}}
                 </div>

All works great but now I have the necessity to insert a modal button in the same page. I have tried to insert the same {{form.data_registrazione|as_crispy_field}} but when I press the datepicker it opens the first form one like in the following photo:

enter image description here

How could I solve this issue?

Federico De Marco
  • 341
  • 1
  • 5
  • 20
  • That's probably a CSS change that you'll require to add to the Datepicker's class. You have to increase the `z-index` value of the calendar widget to make it appear above the modal. – Mehak Jun 05 '20 at 15:17
  • Could you make me an example with my code? – Federico De Marco Jun 05 '20 at 15:19
  • The css code is probably from the 3rd party package tempus-dominus-datetimepicker. After checking the docs, the css class is probably `bootstrap-datetimepicker-widget`. Can you confirm this using console? You can see how to change z-index here https://developer.mozilla.org/en-US/docs/Web/CSS/z-index – Mehak Jun 05 '20 at 15:27

0 Answers0