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

Starting with R2 2022, the Kendo UI team officially drops the support for AngularJS 1.x through Kendo UI for jQuery. The AngularJS related files and functionality are removed from the bundles and distribution in R3 SP1 2023. The last version that contains the files is R3 2023.


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.

The below example loads Kendo UI 2023.3.1010 version.

<script src=""></script>
<script src=""></script>

<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