Cannot open calendar when DOM ist removed #15

louis123562 · 2021-05-03T18:00:26Z

Hey,

we sometimes need to replace the whole body-element with new html.

When i try to open up the calendar (by creating a new constant) it wont show up.

Do you have a fix for this?

Here is an example (with jquery):

 <!DOCTYPE html>
 <html lang="de">
 
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Titel</title>
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
         integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
     <link rel="stylesheet" href="node_modules/mc-datepicker/dist/mc-calendar.min.css">
     <script src="node_modules/mc-datepicker/dist/mc-calendar.min.js"></script>
 
 </head>
 
 <body>
 
     <div class="form-field">
         <label class="form-field__label">Datepicker Demo</label>
         <input id="datepicker" type="text">
     
         <button id="delete">delete</button>
         <button id="open">open again - not working</button>
     </div>
 
 
     <script>
         $(function () {
         
             $(document).on("click", "#datepicker", function () {
                 const test = MCDatepicker.create({
                     dateFormat: 'DDD.DD.MM.YYYY'
                 });
             
                 test.open();
             })
         
             $(document).on("click", "#delete", function () {
                 $(".mc-calendar").remove();
             })
         
             $(document).on("click", "#open", function () {
                 const test = MCDatepicker.create({
                     dateFormat: 'DDD.DD.MM.YYYY'
                 });
             
                 test.open();
             })
         
         });
     </script>
 </body>
 
 </html>

The text was updated successfully, but these errors were encountered:

mikecoj · 2021-05-05T11:55:03Z

Hey,
just pushed a new commit to the develop branch that should fix this.
Check out this example: https://jsfiddle.net/z8xv9n61/8/

louis123562 · 2021-05-07T19:13:57Z

Thank you Mike,

but i think there is a little bit more work (maybe on my side?) to do - or i just dont get it running :)

I made a fiddle which represents my problem: https://jsfiddle.net/louis123562/s405xkfm/15/

I know that replacing the whole body is not good way, but it is as it is at the moment.

The calender is shown without css styles (in fiddle), but in my real project it does not appear in the DOM anyway (after replacing the body).

Can you help me out on this?

mikecoj · 2021-05-07T20:49:46Z

The problem with the jsfiddle is that you are writing the whole code in the HTML area, but in that area, you should add only the content of the body element, everything else has its own dedicated area.

I've saved the code in an HTML file, and opened it, and that works as well.
Probably you're missing something in your code.

louis123562 · 2021-05-10T00:25:52Z

Hey Mike,

i rewrited my code on this weekend, so the body will not be emptied.

It should fix my problem, i will try out later today :)

louis123562 · 2021-05-10T21:38:38Z

Yep, it works like a charm now :)

louis123562 closed this as completed May 10, 2021

ashenshugarRET mentioned this issue May 13, 2021

Is it possible to programmatically change the dateFormat of a datepicker instance #20

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot open calendar when DOM ist removed #15

Cannot open calendar when DOM ist removed #15

louis123562 commented May 3, 2021 •

edited

Loading

mikecoj commented May 5, 2021

louis123562 commented May 7, 2021 •

edited

Loading

mikecoj commented May 7, 2021

louis123562 commented May 10, 2021 •

edited

Loading

louis123562 commented May 10, 2021

Cannot open calendar when DOM ist removed #15

Cannot open calendar when DOM ist removed #15

Comments

louis123562 commented May 3, 2021 • edited Loading

mikecoj commented May 5, 2021

louis123562 commented May 7, 2021 • edited Loading

mikecoj commented May 7, 2021

louis123562 commented May 10, 2021 • edited Loading

louis123562 commented May 10, 2021

louis123562 commented May 3, 2021 •

edited

Loading

louis123562 commented May 7, 2021 •

edited

Loading

louis123562 commented May 10, 2021 •

edited

Loading