Topic: Displaying datepicker in modal window

stanislav9607 free asked 5 years ago

I need to add datepicker to modal window. It looks like on this image: Who knows how to solve this problem?

Alex Gotardi pro answered 4 years ago

the solution's set container in datepicker config. ie.

aionys pro commented 4 years ago

Thanks Alex for the solution.

Damian Gemza staff answered 5 years ago

Hello stanislav9607, We haven't got ready-to-use solution for you, but in accordion to your situation, you have to increase height of your modal, when datepicker is launched. You can use this simple code, which i have prepared for you. The case is to use renderer2, to dynamically set height of your modal. .ts code:
@ViewChild('modal') modal: ElementRef;

@HostListener('click', ['$event']) onClick() {

this.renderer.setStyle(this.modal.nativeElement, 'height', '600px');


constructor(privaterenderer:Renderer2) {

.html code: Add #modal identifier to <div class="modal-body">
Best Regards,

aionys pro commented 4 years ago

Hello Damian, Are you planning to fix this issue? when date-picket is shown on the modal form it should be in front of this modal form.

Damian Gemza staff commented 4 years ago

Dear aionsys, Is my workaround not working on your project? Is something wrong with that code? Please let me know. Best Regards, Damian

aionys pro commented 4 years ago

Damian, Yes, workaround doesn't work in my project, I had to use modal-right class on my modal form. PS: Still I would expect a behavior that I wrote in my previous comment as a correct one.

Damian Gemza staff commented 4 years ago

Could you show me some screenshots of actual behavior?

aionys pro commented 4 years ago

Damian, Here are screenshots of my current workaround: and As you can see I had to leave a lot of empty space in the modal form which is not good.

Damian Gemza staff commented 4 years ago

Dear aionys, In your example you have to manually adjust height and width of modal window when datepicker is visible. But for me, your actual behavior is correct. There should be some free space. We'll take a deeper look onto datepicker in modal, and we'll try to upgrade actual behavior. Best Regards, Damian

Alex Gotardi pro commented 4 years ago

@aionys, the solutions is set container in datepicker config. ie. $('.picker').pickadate({ ... "container":"body" });

cms8000 pro commented 2 years ago

Unfortunately this does nit work for me, I don't know why. The datepicker works outside the modal, though. Any complete code examples? Here's my script: // Data Picker Initialization $('.datepicker').pickadate({ z-index:1151 !important; // Strings and translations monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], showMonthsShort: undefined, showWeekdaysFull: undefined,

        // Buttons
        today: 'Today',
        clear: 'Clear',
        close: 'Close',

        // Accessibility labels
        labelMonthNext: 'Next month',
        labelMonthPrev: 'Previous month',
        labelMonthSelect: 'Select a month',
        labelYearSelect: 'Select a year',

        // Formats
        format: 'd mmmm, yyyy',


Arkadiusz Idzikowski staff commented 2 years ago

Do you use MDB Angular or jQuery version? Please provide full html/js code so we can reproduce this problem on our end.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No