Getting kendoDateTimePicker is not a Function in Console when rendering during $(document).ready()

1 Answer 72 Views
Date/Time Pickers
Matt
Top achievements
Rank 1
Iron
Matt asked on 03 Aug 2023, 07:04 PM | edited on 03 Aug 2023, 07:04 PM

When the following code is run, I get an error in the console indicating that .kendoDateTimePicker is not a function, but the controls render when the convertNewPickerControl() method is called outside the $(document).ready() function.

I also get the same error when I try to convert cloned inputs dynamically (e.g., when a user presses the "Add" button.

The following is the code for the entire page (I'm getting the same issue in our product using similar code).

 

 


<script src="~/Scripts/jquery-3.4.1.min.js">
</script> <script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script> @Styles.Render("~/Content/css") @Styles.Render("~/Content/kendo/styles") @Styles.Render("~/Content/kendo/css") <style> .row { padding-top: 12px; padding-bottom: 12px; } </style> <main> <div id="cloneDiv" style="display:none;"> <div id="row0" class="row"> <div class="col-md-1 form-label">Date/Time:</div> <div class="col-md-5"> <input id="dateTimePickerFrom_row0" /> </div> <div class="col-md-5"> <input id="dateTimePickerTo_row0" /> </div> <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn> </div> </div> <div id="parentDiv"> <div id="row1" class="row"> <div class="col-md-3"> <input id="dateTimePickerBase_row1" class="date-time-picker" /> </div> <div class="col-md-3"> <input id="dateTimePickerFrom_row1" class="date-time-picker" /> </div> <div class="col-md-3"> <input id="dateTimePickerTo_row1" class="date-time-picker" /> </div> <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn> </div> </div> </main> <script> var row = parseInt(1); console.log('converting before document ready...'); convertNewPickerControl("dateTimePickerBase_row1") $(document).ready(function () { console.log('converting within document ready...'); convertNewPickerControl("dateTimePickerFrom_row1"); }); console.log('converting after document ready...'); convertNewPickerControl("dateTimePickerTo_row1"); function convertNewPickerControl(sender) { var savedStartDate = new Date(); $("#" + sender).kendoDateTimePicker({ format: "MM/dd/yyyy hh:mm:ss tt", value: savedStartDate, min: savedStartDate }); console.log('...successfully converted.'); } function addNewRow(sender) { var sourceRow = $('#row0'); var newRow = $('#row' + row); var currentRowNumber = 'row' + row; var regex = new RegExp(currentRowNumber, "g"); var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g); var _rowRegex = new RegExp(/\_row\d+/g); var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1)); clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1)); newRow.after(clonedRow); /* convert new inputs to datetimepickers */ var newFromControl = "dateTimePickerFrom_row" + row; var newToControl = "dateTimePickerTo_row" + row; convertNewPickerControl(newFromControl); convertNewPickerControl(newToControl); row = (parseInt(row) + 1); } </script>

As can be seen in the console, the first and last calls to convertNewPickerControl() work, but the call within $(document).ready() does not (and neither do the calls made to convertNewPicker() in addNewRow() -- not shown below):

 

So...I know $(document).ready is executing as the console.log entry is noted.  Why would it be working outside $(document).ready() but not within it (or via the call when adding a new row)?

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 08 Aug 2023, 01:47 PM

Hello, Matt,

Thank you for the provided code snippet.

I tested it in this Dojo example and you can see that when the function is called from the document.ready function, the DateTimePicker is initialized as expected.

Could you please provide a runnable example where I can observe the error, or modify the provided Dojo example? I will then be able to investigate and provide further details on the matter.

Thank you in advance for the cooperation. Looking forward to your reply.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Date/Time Pickers
Asked by
Matt
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
Share this question
or