Kendo DatePicker in Durandal Modal popup - kendo-ui

Question

I have a Kendo Datepicker that worked perfectly on a div while I was beginning development of a page.
After I got everything all set and working the way it was supposed, I moved the datepicker to a Durandal Modal as was the requirement. The modal works fine, and other databinding is working on the modal, but not the datepicker.
I have tried loading the datepicker at various times in the Durandal lifecycle such as activate, compositionComplete and attached, as well as changing the Z Index to 20000. I am not quite user what I might be missing.
Here is the latest pertinent code:
define([
'durandal/app',
'plugins/router',
'plugins/dialog',
'services/datacontext',
'services/dialogs',
'viewmodels/helpers/vc',
'services/logger',
'services/settings'
],
function (app, router, dialog, datacontext, dialogs, vc, logger, settings) {
var featureSetToEdit;
var startFeaturesDatePicker = null;
var endFeaturesDatePicker = null;
var today = new Date();
var featList = ko.observableArray(['']);
var saving = ko.observable(false);
var isUserInReadOnlyRole = ko.observable(true);
function attached() {
loadDatePickers();
};
function compositionComplete() {
isUserInReadOnlyRole(vc.isUserReadOnly(datacontext.userRole));
};
function loadDatePickers() {
startFeaturesDatePicker = $("#startDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setStartDate,
}).data('kendoDatePicker');
endFeaturesDatePicker = $("#endDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setEndDate,
}).data('kendoDatePicker');
};
var setStartDate = function () {
startFeaturesDatePicker.value($("#startDateFeatureSet").val());
};
var setEndDate = function () {
endFeaturesDatePicker.value($("#endDateFeatureSet").val());
};
function checkboxDivId(featuresKey) {
return 'checkboxDivId' + featuresKey;
};
function edit(featureSetToEdit, fList) {
self = this;
self.featList(fList);
return dialog.show(self);
};
function save() {
};
function cancel() {
dialogs.confirmYesNo('Discard changes to this feature Set?', 'Confirm cancel',
function () {
dialog.close(self, false);
},
function () {
return;
}
);
};
// Definition of viewmodel (list of exposed properties and methods)
var vm = {
featList: featList,
edit: edit,
save: save,
saving: saving,
cancel: cancel,
isUserInReadOnlyRole: isUserInReadOnlyRole,
checkboxDivId: checkboxDivId
};
return vm;
});
HTML
<div class="messageBox autoclose" style="min-height: 330px" >
<div class="modal-header">
<h3>Edit Feature Set</h3>
</div>
<div class="modal-body" style="padding: 2px 5px 2px 5px; background-color: #ddd; min-height: 250px; width: 400px; border: 1px solid silver;">
<table class="k-grid">
<tr class="dataRow" style="padding: 2px;">
<td><span>Start Date</span></td>
<td><input id="startDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>End Date</span></td>
<td><input id="endDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>Features</span></td>
<td id="featuresCheckbox" style="font-size: 10pt; text-align: left" data-bind="foreach: featList">
<input data-bind="attr: { id: $parent.checkboxDivId($data.keyChar), value: $data.keyChar }" type="checkbox" style="margin-bottom:6px;" /> <span data-bind="text: $data.name" style="margin-top:6px;"></span> <br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<div style="float: right">
<span class="icon-spin icon-spinner waiting" data-bind="visible: saving"> </span>
<button class="btn btn-primary" data-bind="click: save, enable: !saving() && !isUserInReadOnlyRole()">Save</button>
<button class="btn btn-default" data-bind="click: cancel, enable: !saving()">Cancel</button>
</div>
</div>
</div>
Can you please take a look and let me know what I might be missing?

Answer 1

So after finding I still needed to load it through the usual Kendo initialization, I searched more until I found that to load it properly I needed the following code in the modal js page:
self = this;
self.compositionComplete = function () {
loadDatePickers();
};
return dialog.show(self);
Now it works exactly the same as a datepicker on a non-modal page.
I hope this helps others to!