Best Practice to Clone DatePicker/DateTimePicker

[Matt]

As the subject says, I'm looking for the recommended way to clone existing DateTimePicker controls at run time so that users can create as many controls as are necessary.

Our application allows users to clone rows of data that contain both DatePickers and DateTimePickers.  We recently upgraded from a previous version of Kendo UI to 2022.3.1109 and now the code that used to work does not.

If we don't execute the following, the look and feel is correct (but nothing happens when either the date or time controls are clicked):

If we do execute the above, the control appears as shown in the second row below...

...and the following error appears in the console:

I am able to create cloned fields if I write the appropriate HTML from scratch (e.g., embed a constant in the JavaScript function), but there's other logic that's fired that we need to take care of so that's not optimal.

I've also tried getting the options from the original control and applying them to the cloned control, but that also doesn't work, nor does attempting to destroy the control via $("#controlName").data("kendoDateTimePicker").destroy().  (My guess is that the underlying Kendo logic doesn't know about the cloned controls so the calls fail.)

Any help on what the best practice is would be greatly appreciated!

[Matt]

After spending 2+ days on trying to get this to work, I went ahead and just replaced the <DIV> containing the DateTimePicker element with a "clean" version that contains a vanilla input that I then convert to a DateTimePicker.  It works like a champ, but I'm still interested in learning what the best practice would be (if it's different from what I ended up doing).

[Georgi Denchev]

Hi, Matt,

Thank you for the provided details.

I am not quite sure what the full cloning logic looks like, but you should be able to do something similar to this:

  <button id="clone">Clone</button>
  <div class="row">
    <input class="start" style="width: 250px;"/>
    <input class="end" style="width: 250px;"/>
  </div>
  
  <script>
    let defaultRow = $(".row").clone();
  	let startOptions = $(".start").kendoDateTimePicker().data("kendoDateTimePicker").options;
  	let endOptions = $(".end").kendoDateTimePicker().data("kendoDateTimePicker").options;
    
    $("#clone").on("click", () => {
      let clone = defaultRow.clone().appendTo(document.body);
      clone.find(".start").kendoDateTimePicker(startOptions);
      clone.find(".end").kendoDateTimePicker(endOptions);
    });
  </script>

I believe this is the approach that you ended up using and I'd say that this probably the cleanest way to do it. It is best to not clone elements that have already been initialized as Kendo components. The main reason being, you can copy over event handlers and styles, and this could potentially mess things up.

Dojo

https://dojo.telerik.com/@gdenchev/USufegOD 

Best Regards,
Georgi Denchev
Progress Telerik