Ben Cull - Payments Engineer and Microsoft Development Professional

Kendo Date Picker Directive for AngularJS

Who says that Angular doesn’t play nicely with other tools and frameworks.

Here’s a directive that will automatically add a Kendo Date Picker to any text box with the attribute kendo-date-picker.

‘kendoDatePicker’ Directive

.directive('kendoDatePicker', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (!element.data('kendoDatePicker')) {
                element.kendoDatePicker();
            }
        }
    };
});

Attach this directive to one of your modules. Mine is attached to my app module so it is available globally.

Example Usage

<input type="text" kendo-date-picker />

Quick Directive Explanation

Directives are the perfect place to manipulate the DOM. In this case, when angular detects the directive as an attribute, it runs our custom linking code to enable the Kendo Date Picker.

The restrict: 'A' means look for our directive as an attribute.

The link: function(scope, element, attrs) gives us the local scope of the directive, the element itself, and any attributes on that element.

Want to write your own simple directive? Take a look at these:

Kendo Date Picker Directive for AngularJS
Prev post

Move Shelveset to a Different Branch in TFS

Next post

The State of Payments in Australia - DDD Melbourne Edition

Kendo Date Picker Directive for AngularJS

Get in touch

Send me a message and I'll get back to you.