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

问题描述

我使用的角度网格，UI格，位于 ui-grid.info 。

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.

我似乎能够把获得在那里我他们在columnDefs使用此希望控件： {场：'mixedDate'，cellFilter：日期，filterHeaderTemplate：'＆LT; D​​IV＆GT;从＆LT;输入类型=日期＆GT;到＆lt; INPUT TYPE =日期＆GT;＆LT; / DIV＆GT;' } 。我还可以得到某种过滤通过在不同的范围内把这些东西的时候将数据-NG-模式=colFilter.term工作。过滤似乎并不甚至做一个等于虽然。

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.

有没有人有code本的作品，也可以点我在正确的方向？

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网过滤


• UI格的自定义筛选

• ui-grid filtering
• ui-grid custom filtering

推荐答案

你的意思是这样呢？
 

首先，你应该包括 jQuery UI的日期选择器

然后，您还将创建一个指令的了：

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

在您的columnDefs你还需要使用客户的过滤器和滤芯头模板：

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

过滤器：[{条件：checkStart}，{条件：checkEnd}]，filterHeaderTemplate：'＆LT; D​​IV CLASS =UI并网过滤容器＆GT;来自：其中，输入方式=显示：内联;宽度：30％级=UI-电网滤波器输入日期选取器类型=文本NG模型=col.filters [0] .term/＆GT;为：其中，输入风格=显示：内联;宽度：30％级=UI-电网滤波器输入日期选取器类型=文本NG模型=col.filters [1] .term /＆GT;＆LT; / DIV＆GT;

假设你正在使用momentjs
该过滤器功能将是这样的：

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格的自定义日期过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！