Topic: Jquery New datepicker element destory
lassekofoed free asked 3 years ago
I have moved to the new datepicker, do to overlay issue on the old one. I have a from date and a to date function. I need the to date to reset and put a new date range on change of from date
I can't figure out how to destroy the current datepicker element. So end up have multiple elements.
Expected behavior
Only one datetime element
Actual behavior Multiple datetime element on same input
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/jquery/lassekofoed/2681243#js-tab-view
Video of problem https://drive.google.com/file/d/1A0JNEspJw16bh0XDPvkTf3nlaSaThXs5/view
Krzysztof Wilk staff answered 3 years ago
Hi!
The problem is you are initializing a new DatePicker on the same element every time you change its value. So I think that there are two ways to achieve your goal:
- You can try to get the "Clear" button and trigger a click event every time your first input changes. So when you try to change the first input - the second one is clear.
If you want to do it in the way you are trying - you have to destroy the whole HTML element, append a new one and initialize DatePicker on it. The code for that should look like this:
const pickerTemplate = `<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker"><input placeholder="Select date" type="text" id="example" class="form-control"><label for="example">Try me...</label><i class="fas fa-calendar input-prefix" tabindex=0></i></div> `;
Then you have to destroy old one:
$('old-one').remove()
And insert a new one using for example .append()
method or innerHTML property:
containerForPicker.innerHTML = pickerTemplate;
Now you can initialize a new one like you do.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes