New to Kendo UI for jQuery? Download free 30-day trial

Add DatePicker to Gantt Toolbar in AngularJS Applications


Product Progress® Kendo UI® Gantt for jQuery


How can I insert a Kendo UI DatePicker widget into the toolbar of the Kendo UI Gantt in AngularJS scenarios? How can I use the DatePicker to change the visible dates of the Gantt?


  1. Pass a template to the Gantt toolbar with a single input element.
  2. In the dataBound event of the Gantt, initialize the DatePicker and assign a handler for its change event.
<div ng-app="KendoDemo" ng-controller="MyCtrl">
  <div kendo-gantt="theGantt" k-options="ganttOptions"></div>    

  angular.module("KendoDemo", ["kendo.directives"])
    .controller("MyCtrl", function($scope) {
        var start = new Date();
        var end = new Date();
        start.setDate(start.getDate() - 30);
        end.setDate(end.getDate() + 30);

        $scope.ganttOptions = {
          toolbar: [{
            template: '<input id="picker" />'
          dataBound: function(e) {
            var gantt = e.sender;
            var pickerElement = gantt.element.find('#picker');
            var picker = pickerElement.getKendoDatePicker();

            if (!picker) {
                change: function(e) {
          dataSource: [{
            id: 0,
            orderId: 0,
            parentId: null,
            title: "Task1",
            start: start,
            end: end
          views: [
            { type: "month", selected: true }

See Also

In this article