Cloned Date controls is not working - How to initialize Datetime picker?

[Mahesh Machina]

I have a Datetime picker inside div control. i am copying this control using jquery.Clone()

<div>

<ejs-datepicker id="testDate" ejs-for="@Model.testDate" placeholder="Choose a Date"></ejs-datepicker>

</div>

The cloned control is not working i mean when i click on calendar icon popup is not appearing.

FYI - i changed ID on the cloned control

how to clone control -  https://makitweb.com/create-duplicate-of-the-elements-with-clone-jquery/

Please let us know How to initialize Datetime picker?

[Berly Christopher]

Hi Mahesh, 

  

Greetings from Syncfusion support. 

  

We have checked the requested requirement. When clone the datepicker element, it will clone the input alone and popup element will be created and appended to the body element on open action. So, we need to append it to the date object after cloned the input element to get rid of the reported issue. 

  

<div class="element"></div> 

<div class=" control-section"> 

    <div id="wrapper" class="datepicker-section"> 

        <div id="datepicker-control"> 

            <form method="post"> 

                <ejs-datepicker id="DateCreationFrom" ejs-for="@Model.value" placeholder="Choose a Date"></ejs-datepicker> 

                <div id="errorMessage"> 

                    <span asp-validation-for="@Model.value"></span> 

                </div> 

                <div id="submitbutton"> 

                    <ejs-button id="submitButton" content="Submit"></ejs-button> 

                </div> 

            </form> 

        </div> 

    </div> 

</div> 

<button id="btnAdd">Click to clone the component</button> 

 

<script> 

    $("#btnAdd").click(function () { 

        var dateobj = $("#DateCreationFrom").clone(); 

        dateobj[0].setAttribute("id", "clone_date"); 

        $(dateobj).insertAfter('.element:last'); 

        // Render the initially defined datepicker component 

        var datepicker = new ejs.calendars.DatePicker({ 

            "placeholder": "Choose a Date" 

        }); 

        datepicker.appendTo("#clone_date"); 

    }); 

</script> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_clone_date_165989-1167258463  

  

Regards, 

Berly B.C 

[Mahesh Machina]

Perfect. Thank you

[Berly Christopher]

Hi Mahesh, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C