Angular.js ui-grid 自定义日期过滤器 [英] Angular.js ui-grid custom date filter

问题描述

我使用的是角度网格 ui-grid，位于

首先你应该包括 jQuery UI Datepicker

然后你还要为它创建一个指令:

app.directive('datePicker', function(){返回 {限制:A"，要求:'ngModel'，链接:功能(范围，元素，属性，ngModel){$(函数(){$(element).datepicker({changeMonth: 真,更改年份:真实，closeText: '清除',显示按钮面板:真，onClose: 函数 () {var event = arguments.callee.caller.caller.arguments[0];//如果点击清除"，则真正清除它if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {$(this).val('');范围.$应用(函数(){ngModel.$setViewValue(null);});}},onSelect: 函数(日期){范围.$应用(函数(){ngModel.$setViewValue(date);});}});})}}})

在您的 columnDefs 中，您还需要使用客户过滤器和过滤器标题模板:

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"/>到:<input style="display:inline; width:30%" class="ui-grid-filter-input" date-picker type="text" ng-model="col.filters[1].term"/></div>'

假设你使用的是 momentjs过滤器函数将是这样的:

function checkStart(term, value, row, column) {term = term.replace(/\\/g,"")var now = moment(value);如果(术语){if(moment(term).isAfter(now, 'day')) return false;;}返回真；}函数检查结束(术语，值，行，列){term = term.replace(/\\/g,"")var now = 时刻(值)；如果(术语){if(moment(term).isBefore(now, 'day')) return false;;}返回真；}

I am using the angular grid, ui-grid, located at ui-grid.info.

I am trying to make a custom filter that will filter the grid by date using date inputs controls, one for less than and one for greater than.

I seem to be able to put get the controls where i want them using this in the columnDefs: { field: 'mixedDate', cellFilter: 'date', filterHeaderTemplate: '<div>From <input type="date"> to <input type="date"></div>' }. I also can get some sort of filtering to work by setting the data-ng-model="colFilter.term" when putting these things in a different scope. The filtering doesn't seem to even do an equals though.

Does anyone have code for this that works or can point me in the right direction?

Here are some tutorials on the topic on their own site, but I'm not quite sure how to manipulate them to fit my needs or if it's even possible.

• ui-grid filtering
• ui-grid custom filtering

解决方案

Do you mean something like this ?

First you should include jQuery UI Datepicker

Then you will also create a directive for it:

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

In your columnDefs you will also need to use customer filters and filter header template:

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>'

Assume you are using momentjs The filter functions will be like this:

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;
    }

这篇关于Angular.js ui-grid 自定义日期过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！