Displaying datepicker in modal window

Topic: Displaying datepicker in modal window

stanislav9607 free asked 6 years ago

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

Add comment

Alex Gotardi pro answered 6 years ago

2 0 Best answer

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

$(‘.picker’).pickadate({
…
“container”:”body”
});

aionys pro commented 6 years ago

Thanks Alex for the solution.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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,

Damian

aionys pro commented 6 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 6 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 6 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 6 years ago

Could you show me some screenshots of actual behavior?

aionys pro commented 6 years ago

Damian, Here are screenshots of my current workaround: https://www.screencast.com/t/4zuEYTPts and https://www.screencast.com/t/cFniWs5nDr. 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 6 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 6 years ago

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

cms8000 pro commented 4 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',
        "container":"body"

    });
    </script>

<p>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,</p>

<pre class="prettyprint"><code>        // 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',
        "container":"body"

});
    </script>
</code></pre>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 4 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

stanislav9607

0Support score
6Questions 0Answers 0Snippets