智能表:使用带有 AngularJs 的 Bootstrap Datetime-Picker 作为过滤器

Posted

技术标签:

【中文标题】智能表:使用带有 AngularJs 的 Bootstrap Datetime-Picker 作为过滤器【英文标题】:Smart Table: Use Bootstrap Datetime-Picker with AngularJs as Filter 【发布时间】:2015-07-07 07:41:48 【问题描述】:

我正在使用 AngularJS 和 Smart Table 来显示数据库中的项目并按日期过滤项目。我想使用 Datetimepicker (Bootsrap.UI http://angular-ui.github.io/bootstrap/)

我的问题是,如果我将文本输入到 Datetime 元素的输入中,它可以工作,但如果我通过 Datetimepicker 选择日期,文本会更改,但未设置过滤器。

有什么方法可以给智能表选择过滤器?

我的表头是这样的:

 <table st-table="feedBacks" st-pipe="callServer"
                   class="table table-striped table-bordered table-hover table-highlight table-checkable">
                <thead>
                    <tr>
                        <th style="width: 160px">Datum</th>
                        <th>Produkt</th>
                        <th>Version</th>
                        <th>Plattform</th>
                        <th>FeedBack</th>
                        <th style="width: 125px">Option</th>
                    </tr>
                    <tr>
                        <th>
                            <p class="input-group">
                                <input type="text" class="form-control"
                                       datepicker-popup="format" ng-model="dt"
                                       is-open="opened" datepicker-options="dateOptions"
                                       ng-required="true"
                                       close-text="Close" st-search="Timestamp" id="dateFilter" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                            </p>
                        </th>
                        <th><input st-search="ApiKey.Product.ProductName" /></th>
                        <th><input st-search="ApiKey.ProductVersion" /></th>
                        <th>
                            <div class="btn-group">
                                <button class="btn btn-default btn-xs" st-plattform-filter="" st-plattform-filter-column="Plattform">
                                    <span class="fa fa-reorder"></span>
                                </button>
                                <button class="btn btn-default btn-xs" st-plattform-filter="0" st-plattform-filter-column="Plattform">
                                    <span class="fa fa-android"></span>
                                </button>
                                <button class="btn btn-default btn-xs" st-plattform-filter="1" st-plattform-filter-column="Plattform">
                                    <span class="fa fa-windows"></span>
                                </button>
                                <button class="btn btn-default btn-xs" st-plattform-filter="2" st-plattform-filter-column="Plattform">
                                    <span class="fa fa-apple"></span>
                                </button>
                            </div>
                        </th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>

【问题讨论】:

你有答案吗? 如果有帮助,我已经使用 Smart-table 和 dateRangePicker 实现了这一点?告诉我,我会发布代码。 嗨,我也有同样的问题,请发布示例,谢谢 【参考方案1】:

我知道这是旧的。但是,如果有人在 Angular 1.6 上苦苦挣扎,这就是我的答案:

指令:

var app = angular.module("datePickerFilter", []);

app.directive("datePickerFilter", function () 

  function link(scope, element, attr, table) 


scope.$watch('dateToFilter', function () 

  //check if is different from null
  if (scope.dateToFilter) 
    //format if it's not null
    var formatedDate = moment(scope.dateToFilter).format('YYYY-MM-DD');
    table.search(formatedDate, scope.stSearch);
  
  //trigger the search
  table.search(formatedDate, scope.stSearch);
);

//Opciones para input de fecha
scope.dateOptions = 
  formatYear: 'yy',
  startingDay: 1
;

scope.dateFormat = 'yyyy-MM-dd';
scope.altInputFormats = ['M!/d!/yyyy'];
scope.dateInputOpened = false;

scope.openDateInput = function () 
  scope.dateInputOpened = true;
;






return 
    scope: 
      stSearch: "="
    ,
    link: link,
    restrict: "E",
    //We need this directive to be under a stTable directive instance
    require: "^stTable",
    template:


 ` <div class="input-group">
      <input class="form-control" type="text" uib-datepicker-popup="format" is-open="dateInputOpened"
          ng-model="dateToFilter" datepicker-options="dateOptions" close-text="Cerrar"
          alt-input-formats="altInputFormats" ng-click="openDateInput()" ng-focus="openDateInput()" />
      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="openDateInput()">
              <i class="glyphicon glyphicon-calendar"></i>
          </button>
      </span>
  </div>`


 ;

);

html

<date-picker-filter st-search="'nameOfDateFieldToFilter'"></date-picker-filter>

【讨论】:

【参考方案2】:

我用这个插件https://github.com/fragaria/angular-daterangepicker 因为我喜欢日期范围及其纯粹的角度。

希望对你有帮助:)

我的html:

 <div ng-controller="dateRange" class="text-right">
                            <st-date-range start="dateRange.start" end="dateRange.end"></st-date-range>
                            <ta-date-range-picker class="well" ng-model="dateRange" ranges="customRanges" callback="dateRangeupdate(dateRange)"></ta-date-range-picker>
                        </div>

指令:

.directive('stDateRange', ['$timeout', function ($timeout) 
    return 
        restrict: 'E',
        require: '^stTable',
        scope: 
            start: '=',
            end: '='
        ,

        link: function (scope, element, attr, table) 
            var query = ;
            var predicateName = attr.predicate;

            scope.$watch('start', function () 
                if (scope.start) 
                    query.start = moment(scope.start).format('YYYY-MM-DD');
                
                if (scope.end) 
                    query.end = moment(scope.end).format('YYYY-MM-DD');
                
                table.search(query, predicateName);
            );
        
    
    ])

控制器

//Select range options
$scope.customRanges = [
    
        label: "This week",
        range: moment().range(
            moment().startOf("week").startOf("day"),
            moment().endOf("week").startOf("day")
        )
    ,
    
        label: "Last month",
        range: moment().range(
            moment().add(-1, "month").startOf("month").startOf("day"),
            moment().add(-1, "month").endOf("month").startOf("day")
        )
    ,
    
        label: "This month",
        range: moment().range(
            moment().startOf("month").startOf("day"),
            moment().endOf("month").startOf("day")
        )
    ,
    
        label: "This year",
        range: moment().range(
            moment().startOf("year").startOf("day"),
            moment().endOf("year").startOf("day")
        )
    ,
    
        label: "Last year",
        range: moment().range(
            moment().startOf("year").add(-1, "year").startOf("day"),
            moment().add(-1, "year").endOf("year").startOf("day")
        )
    
];

$scope.mycallback = "None";
$scope.dateRangeChanged = function () 
    $scope.mycallback = " from " + $scope.dateRange.start.format("LL") + " to " + $scope.dateRange.end.format("LL");



]);

【讨论】:

你能添加请plunker吗?这对我不起作用。但我也有同样的麻烦。【参考方案3】:

我知道这不是优雅的解决方案,但它会起作用。

st-input-event="focus"

<input st-input-event="focus" st-search="end_time" class="input-sm form-control" type="text" ng-model="end_time" is-open="status.end_time_open" close-text="Close" uib-datepicker-popup="yyyy-MM-dd" datepicker-options="dateOptions" />

【讨论】:

以上是关于智能表:使用带有 AngularJs 的 Bootstrap Datetime-Picker 作为过滤器的主要内容,如果未能解决你的问题,请参考以下文章

带有Angularjs注销错误的Spring Boot

带有 AngularJS 的 Spring Boot 和 CSRF - Forbitten 403 -> 错误注销

Thymeleaf + Boot + AngularJS 指令解析器错误

Angularjs + Spring-boot + nginx的CORS问题

如何使用带有 AngularJs 的 Jquery Datatable 导出表

Spring Boot CORS 过滤器不适用于 AngularJS