Ajouter Jquery datepicker dans l'une des colonnes à l'aide de la table de données angulaire JS

Au lieu de jquery datepicker, vous pouvez opter pour le datepicker angular ui qui est hautement personnalisable et pris en charge pour la version angular js. Ci-dessous le lien pour angualr ui datepicker https://angular-ui.github.io/bootstrap/#!#datepicker < / a> Vous pouvez lire et faire et transmettre vos données à l'objet de date pour le sélecteur de date angulaire.

Vous devez utiliser les tables de données angulaires de la «manière angulaire» pour pouvoir inclure une directive personnalisée dans vos cellules de tableau. Jetez un œil à ce plunk avec des tables de données angulaires fonctionnelles en utilisant la "méthode angulaire" avec une jQuery personnalisée Directive datepicker de l'interface utilisateur. De là, vous pouvez contrôler où le sélecteur de date apparaîtra en fonction d'une condition en utilisant ng-if par exemple.

Lien pour les tables de données angulaires "The Angular Way": https: //l-lin.github.io/angular-datatables/archives/#!/angularWay

Pas un expert des tables de données JQuery, mais a fait une sorte de recherche. Ce n'est pas une vitrine complète, mais une sorte de tutoriel de première étape.

La première chose dont vous avez besoin est de définir un moteur de rendu personnalisé pour votre colonne Date . Vous pouvez le faire comme suit:

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>`;
        }
    }]
);

Ici renderWith est une méthode api de DTColumnBuilder , qui accepte quatre paramètres. Les plus importants d'entre eux sont data et meta - votre valeur actuelle et méta-info d'une cellule (elle contient ligne et colonne code> propriétés du nombre - coordonnées de la cellule). ng-model vous aide à lier la valeur d'entrée à votre objet homeCtrl scope . Je pense que vous avez besoin du sélecteur de date dans chaque ligne, c'est pourquoi je lie sa valeur à un attribut dépendant d'un index de ligne. Cela signifie qu'à tout moment, vous pouvez obtenir la date sélectionnée sous la forme d'une valeur de clé date0 dans homeCtrl scope (pour la ligne avec 0 index). De plus, customdatepicker est expliqué ci-dessous.

Alors que nous essayons de lier datepicker à un élément input , nous modifions DOM. Dans AngularJS, la meilleure pratique consiste à modifier le DOM dans les directives. C'est pourquoi nous définissons notre directive personnalisée. Appelons-le 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();
                }
            });
        }
    };
}

Laissez-moi vous expliquer cela. Nous utilisons une directive pour modifier un élément spécifique, c'est pourquoi nous limitons cela à un attribut uniquement ( restrict: 'A' ). Il faut qu'un élément ait un ng-model défini pour le modifier - et require: 'ngModel est utilisé ici. Enfin, la fonction link est exécutée lorsque l'élément input est compilé par AngularJS. Il prend la portée par rapport à laquelle il est compilé, élément auquel il est lié, analysé attrs de l'élément et ngModelCtrl . Nous utilisons ici la fonction simple datepicker de JQuery-UI. Une fois la date sélectionnée, nous modifions scope et appelons manuellement scope. $ Apply () pour notifier homeCtrl à propos de scope code> change.

Enfin, votre code peut ressembler à ceci:

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

Veuillez noter que nous utilisons l'option createdRow et fournissez ici un rappel qui est déclenché lorsqu'une ligne est créée. Ici, nous avons manuellement l'élément de ligne angularjs-compile par rapport à homeCtrl $ scope - cela fait fonctionner la liaison.

Et n'oubliez pas d'inclure JQuery-UI CDN votre projet après votre importation JQuery.