Topic: How do I set the container for the DateTimePicker?
Hello, I am trying to set the container for the modal that opens up when I use the DateTimepicker.
I saw that it is possible in this snippet for MDBStandard https://mdbootstrap.com/snippets/standard/mlazaru/4818409#html-tab-view
But I don't see the option for MDBVue.
How would I go about accomplishing this?
Snippet for what I'm hoping to accomplish
https://mdbootstrap.com/snippets/vue/riva/5387779
Hi! Unfortunately i don't think it is possible to change the modal container of datetimepicker, datepicker or timepicker right now. I have added this to our list, so we can see what to do about it. Best Regards!
Riva pro premium priority commented 2 years ago
Would it be a bad idea if I were to follow the example snippet for MDBStandard to get my desired behavior if the rest of my app is using MDBVue?
Bartosz Cylwik staff commented 2 years ago
Adding container to the MDBDateTimepicker won't do anything. Using the standard package in vue is not recommended as you may encounter some issues.
Riva pro premium priority commented 2 years ago
So our current situation is that we have an embedded Vue app on our webpage with the datetimepicker, and once the modal is opened, it gets appended to the bottom of the DOM and loses all the styling due to being outside of the embedded app.
It's not in a deployable state for us in this situation. Do you have any suggestions on what we can do about this?
Bartosz Cylwik staff commented 2 years ago
Is there any chance to add the necessary css to your webpage? You could also try to change the sourcecode of the Timepicker and Datepicker yourself, so that the modal won't teleport to the body.
In the provided example from MDBVue, the DateTimePicker component is not directly customizable in terms of setting the container for the modal. However, you can achieve similar functionality by customizing the DateTimePicker component or by using other Vue.js libraries that provide more extensive customization options.
Here's a general approach you can take to accomplish this using MDBVue:
Customize DateTimePicker Component: If the MDBVue DateTimePicker component does not offer an option to set the container for the modal directly, you may need to customize it to add this functionality. You can extend the component or create a wrapper component that wraps the DateTimePicker and adds the desired container functionality.
Use External Libraries: Alternatively, you can explore using external Vue.js libraries that provide more customizable DateTimePicker components. Libraries such as Vue FlatPickr Wrapper or Vue2 DateTimePicker offer extensive customization options, including the ability to specify the container for the modal.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 3.2.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
SULINE LANIE commented a year ago
Hey,
To set the container for the DateTimePicker, you typically need to use the options or configuration provided by the DateTimePicker library you are using. Different libraries may have different methods for specifying the container element.
Since I don't know the specific DateTimePicker library you are using, I'll provide a general explanation that should work for most libraries.
Identify the DateTimePicker instance: First, make sure you have an instance of the DateTimePicker created. This is usually done by initializing the DateTimePicker with specific options and targeting an input field or a container element.
Specify the container option: Check the documentation of your DateTimePicker library to find out if it supports a container option. If it does, this option allows you to set the container element where the DateTimePicker's calendar and other components will be displayed.