Добавьте Jquery datepicker в один из столбцов, используя angular JS datatable

Вместо jquery datepicker вы можете выбрать angular datepicker ui, который легко настраивается и поддерживается для версии angular js. Ниже приведена ссылка на angualr ui datepicker https://angular-ui.github.io/bootstrap/#!#datepicker Вы можете читать, делать и передавать свои данные в объект date для angular datepicker.

Вы должны использовать Angular Datatables «угловым способом», чтобы иметь возможность включать настраиваемые директивы в ячейки таблицы. Взгляните на этот шлепать с рабочими таблицами данных Angular, используя «угловой способ» с настраиваемой директивой jQuery UI datepicker. Оттуда вы можете контролировать, где будет отображаться датапикер, в зависимости от условия, например, с помощью ng-if.

Ссылка на Angular Datatables "The Angular Way": https://l-lin.github.io/angular-datatables/archives/#!/angularWay

Не эксперт в таблицах данных JQuery, но провел какое-то исследование. Это не полная демонстрация, а своего рода пошаговое руководство.

Первое, что вам нужно, это определить настраиваемое средство визуализации для столбца Date. Сделать это можно следующим образом:

$scope.dtColumns = [
    ...,
    DTColumnBuilder.newColumn("DATE", "date").renderWith(renderTextBox);
]
...
function renderTextBox(data, type, full, meta) {
    return `<input value = "${data}" ng-model = "date${meta.row}" customdatepicker>`;
}

Здесь renderWith - это API-метод DTColumnBuilder, который принимает четыре параметра. Наиболее важные из них - это data и meta - ваше текущее значение и метаинфо ячейки (содержит числовые свойства row и column - координаты ячейки). ng-model помогает вам привязать входное значение к вашему объекту homeCtrlscope. Я считаю, что вам нужен datepicker в каждой строке, поэтому я привязываю его значение к атрибуту, зависящему от индекса строки. Это означает, что в любое время вы можете получить выбранную дату как значение ключа date0 в homeCtrlscope (для строки с индексом 0). Более того, customdatepicker объясняется ниже.

Поскольку мы пытаемся привязать datepicker к элементу input, мы модифицируем DOM. В AngularJS лучше всего изменять DOM в директивах. Вот почему мы определяем нашу настраиваемую директиву. Назовем его customdatepicker:

angular.module('MyApp').directive('customdatepicker', CustomDatepicker);
function CustomDatepicker() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                defaultDate: attrs.value,
                onSelect: function (date) {
                    scope[attrs.ngModel] = date;
                    scope.$apply();
                }
            });
        }
    };
}

Позвольте мне это объяснить. Мы используем директиву для изменения определенного элемента, поэтому мы ограничиваем это только атрибутом (restrict: 'A'). От элемента требуется, чтобы для его изменения был определен ng-model - и здесь используется require: 'ngModel. Наконец, функция link выполняется, когда элемент input компилируется с помощью AngularJS. Он берет scope, с которым он компилируется, element, с которым он связан, анализирует attrs элемента и ngModelCtrl. Здесь мы используем простую функцию JQuery-UI datepicker. После выбора даты мы модифицируем scope и вручную вызываем scope.$apply(), чтобы уведомить homeCtrl об изменении scope.

Наконец, ваш код может выглядеть так:

var app = angular.module('MyApp', ['datatables']);
app.directive('customdatepicker', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModelCtrl) {
          $(element).datepicker({
              defaultDate: attrs.value,
              onSelect: function (date) {
                  scope[attrs.ngModel] = date;
                  scope.$apply();
              }
          });
      }
    };
});
app.controller('homeCtrl', ['$scope', '$http', '$compile', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, $compile, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("OBJECTID", "ID"),
            DTColumnBuilder.newColumn("SERVICE_CODE", "Service Code"),
            DTColumnBuilder.newColumn("COND1", "Condition 1"),
            DTColumnBuilder.newColumn("COND2", "Condition 2"),
            DTColumnBuilder.newColumn("COND3", "Condition 3"),
            DTColumnBuilder.newColumn("SERVICE_TYPE", "Service type"),
            DTColumnBuilder.newColumn("REMARK", "Remark"),
            DTColumnBuilder.newColumn("DATE", "date").renderWith(renderTextBox)
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            url: "/home/getdata",
            type: "POST"
        })
        .withOption('createdRow', function(row) {
            $compile(angular.element(row).contents())($scope);
        })
        .withPaginationType('full_numbers')
        .withDisplayLength(10);

        function renderTextBox(data, type, full, meta) {
            return `<input value = "${data}" ng-model = "date${meta.row}" customdatepicker>`;
        }
    }]
);

Обратите внимание, что мы используем опцию createdRow и обеспечиваем здесь обратный вызов, который запускается при создании строки. Здесь мы вручную angularjs-компилируем элемент строки с homeCtrl$scope - это заставляет привязку работать.

И не забудьте включить JQuery-UI CDN в свой проект после импорта JQuery.