Angular.js l'interface utilisateur personnalisé grille filtre de date

Je suis à l'aide de l'angle de la grille, de l'interface utilisateur-réseau, situé à ui-grid.info.

Je suis en train de faire un filtre personnalisé qui permettra de filtrer par date en utilisant la date d'entrées de commandes, l'une pour les moins de et un pour les plus de.

Je semble être en mesure de mettre à obtenir le contrôle là où je veux en utilisant cette dans le columnDefs: { field: 'mixedDate', cellFilter: 'date', filterHeaderTemplate: '<div>From <input type="date"> to <input type="date"></div>' }. Je peux aussi obtenir une sorte de filtrage de travail par la mise en au data-ng-model="colFilter.terme" lors de la mise de ces choses dans un autre champ. Le filtrage ne semble pas à même de faire une égalité.

Quelqu'un aurait-il le code pour ce qui fonctionne ou peut me pointer dans la bonne direction?

Voici quelques tutoriels sur le sujet sur leur propre site, mais je ne suis pas tout à fait sûr de savoir comment les manipuler pour l'adapter à mes besoins ou si c'est encore possible.

Pouvez-vous faire un plnkr pour montrer votre problème.
Voici un exemple: plnkr.co/modifier/R4cZa6dZllEjdHHMaHA9?p=preview. Je n'arrive pas à obtenir le colFilter.durée de travail maintenant bien. Il est basé sur l'original de l'échantillon à partir de l'interface utilisateur-réseau de la documentation

OriginalL'auteur jgerstle | 2015-07-23

  1. 4

    Voulez-vous dire quelque chose de ce genre ?
    Angular.js l'interface utilisateur personnalisé grille filtre de date

    D'abord, vous devez inclure jQuery UI Datepicker

    Puis vous permettra également de créer une directive pour elle: 

    app.directive('datePicker', function(){
    return {
        restrict : "A",
        require: 'ngModel',
        link : function(scope, element, attrs, ngModel){
            $(function(){
                $(element).datepicker({
                     changeMonth: true,
                     changeYear: true,
                     closeText: 'Clear',
                     showButtonPanel: true,
                     onClose: function () {
                        var event = arguments.callee.caller.caller.arguments[0];
                        //If "Clear" gets clicked, then really clear it
                        if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                            $(this).val('');
                            scope.$apply(function() {
                               ngModel.$setViewValue(null);
                            });
                        }
                    },
                    onSelect: function(date){
                        scope.$apply(function() {
                           ngModel.$setViewValue(date);
                        });
                    }
               });
            })
        }
    }
})

    Dans votre columnDefs vous aurez également besoin d'utiliser le client filtres et modèle d'en-tête:

    filters:[{ condition: checkStart}, {condition:checkEnd}],filterHeaderTemplate: '<div class="ui-grid-filter-container">from : <input style="display:inline; width:30%" class="ui-grid-filter-input" date-picker type="text" ng-model="col.filters[0].term"/> to : <input style="display:inline; width:30%" class="ui-grid-filter-input" date-picker type="text" ng-model="col.filters[1].term"/></div>'

    Supposent que vous utilisez momentjs
    Les fonctions de filtrage sera comme ceci:

    function checkStart(term, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isAfter(now, 'day')) return false;;
        } 
        return true;
    }

    function checkEnd(term, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isBefore(now, 'day')) return false;;
        } 
        return true;
    }
    Oui exactement que, en supposant que le filtre fonctionne correctement.
    Une chance que je peux obtenir le code pour ce filtre
    J'ai ajouté quelques détails
    Le code pour checkStart et checkEnd travail dans angularJS autres que momentjs ? Et de fait ce code de travail jgerstle ?
    Pouvez-vous ajouter plus description par exemple dans plnkr.co ?

    OriginalL'auteur Qi Tang

  2. 2

    Je suis en utilisant angulaire de l'interface utilisateur-réseau 3.1.1 et angular-ui-bootstrap 1.3.2.

    Ma solution est basée sur l'interface utilisateur de la grille de filtre aider et Munna S /Bennett Adams commentaires. J'ai Obtenu une solution avec moins de code.

    Il fonctionne avec deux filtres, et un modèle Personnalisé ('ui-grille/custom-ui-grille-filtre").

      { field: 'DATE_TIME', name: 'Date Time', cellTooltip: true,
    cellFilter: 'date:\'yyyy-MM-dd\'',
    cellTemplate: 'ui-grid/date-cell',
    filterHeaderTemplate: 'ui-grid/custom-ui-grid-filter',
    width: '40%',
    filters: [
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate >= term;
            },
          placeholder: 'Greater than or equal'
        },
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate <= term;
            },
          placeholder: 'Less than or equal'
        }
    ],
    headerCellClass: $scope.highlightFilteredHeader }

    Rappeler que, dans l'état de la fonction, 'terme vient du DatePicker filtre et est une Date. Aussi, la valeur est une chaîne formatée comme 'yyyy-MM-dd" dans mon exemple.

    Voici mon Plunkr
    Espérons que cela aide et si vous avez des amélioration s'il vous plaît laissez-moi savoir.

    même filtre j'ai besoin, mais à côté de la grille "personnalisé" pas à l'intérieur de ceindre la cellule de filtre. Merci de m'aider comment faire pour attribuer minDate et maxDate de filtre de l'objet?
    Super, ça fonctionne parfaitement. Aussi, pas de changement pour l'interface utilisateur-réseau balise div, juste ajouter un peu de js.
    Ce doit être le top meilleure solution à ce jour.

    OriginalL'auteur Aquiles

  3. 1

    je l'ai fait à l'aide d'un code javascript personnalisé méthode 

    condition: function(term, value){
    if (!term) return true;
    var valueDate = new Date(value);
    var replaced = term.replace(/\\/g,'');
    var termDate = new Date(replaced);
    return valueDate < termDate;
},
placeholder: 'less than'
    Pour un navigateur plus agnostique solution, je voudrais passer à valueDate.getTime() < termDate.getTime(); basé sur cette question. stackoverflow.com/questions/338463/... Vous pourriez aussi vouloir un try, catch ou un chèque pour des dates non valides.

    OriginalL'auteur Munna S