Jquery New datepicker element destory


Topic: Jquery New datepicker element destory

lassekofoed asked 4 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 4 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:

  1. 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.
  2. 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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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
Tags