Question

我使用AngularJS和智能表来显示数据库中的项目并按日期过滤项目。我想使用Datetimepicker（Bootsrap.UI http://angular-ui.github.io/bootstrap/）

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

有没有办法给智能表选择过滤器？

我的表头看起来像这样：

await

Answer 1

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

<强> ST-输入事件=＆＃34;聚焦＆＃34;

<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" />

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


}]);

Answer 3

我知道这很老了。但是，如果有人在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>

智能表：使用Bootstrap Datetime-Picker和AngularJs作为过滤器

3 个答案: