Kendo Date Picker

[guilmori]

Someone made a directive for Kendo Date Picker ?

Thanks!

[ckosloski]

Hi @guilmori, did you try any of the existing date pickers already included in the project?

[guilmori]

Hi @ckosloski ! We already use kendo date picker throughout our application, so we would like to stick with the same editor.

I tried making a directive, which seems to work. Not sure how to pass in the kendo parameters though, like k-options, k-format and so on. Is there any documentation on building custom directives ? Other than looking at source code in angular-xeditable/src/js/directives/ and try to understand what is going on :-)

angular.module('xeditable').directive('editableKendoDate', ['editableDirectiveFactory',
        function (editableDirectiveFactory) {
            return editableDirectiveFactory({
                directiveName: 'editableKendoDate',
                inputTpl: '<input kendo-date-picker />',
                render: function () {

                    this.parent.render.call(this);
                    this.inputEl.removeAttr('ng-model');
                    this.inputEl.attr('k-ng-model', '$parent.$data');
                }
            });
        }]);

[ckosloski]

There isn't any documentation on how to add a new directive. Generally you would add a 'e-' in front of all the attributes that get passed into xeditable. Try doing passing in e-k-options=yourOptions and in the directive, something like:

var attrs = this.attrs;
this.inputEl.att('k-options', attrs.eKOptions);

[guilmori]

I tried sending e-k-options and it works built-in ! No need to do anything in the directive, great !.

[ckosloski]

Once you get your directive working, are you going to submit a pull request to have it added here?

[guilmori]

You would like this builtin in angular-xeditable ? I'll try if I got some spare time :-)

The final code is the same as the one I pasted above though.

Note that we use the k-ng-model attributes which binds to a date object, instead of a date string with ng-model (see http://docs.telerik.com/kendo-ui/AngularJS/introduction) Not sure if this would fit everyone needs.

[ckosloski]

OK, if this is something specific to your project, no need to merge in. Can this issue be closed then?

[guilmori]

Hmm well, I got a false impression of this working

Here is a jsfiddle: http://jsfiddle.net/a6nr6a2f/

The control displays ok but when I click on a date, it closes the editable without saving. If a manually enter a date like "7/11/2017" in the input and click the save, it works.

I assume clicking in the calendar dropdown does trigger an outside click for the editable which close it. Is there anyway to fix this ?

[ckosloski]

You need to set blur="ignore" (or submit). The editable element thinks that clicking on the kendo picker popup is blurring the element and is thus cancelling the form since the default for blur is cancel.

[guilmori]

Thanks, good enough for me !