我使用AngularJS和智能表显示来自数据库的项目和按日期筛选项目。我想用一个DateTimePicker（Bootsrap.UI http://angular-ui.github.io/bootstrap/）
我的问题是，如果我输入的文本到它的工作日期时间元素的输入，但如果我通过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>
我知道这是不是优雅的解决方案，但它会工作。
ST-输入事件= “焦点”
<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" />
我使用这个插件qazxsw POI作为我喜欢的时间范围和其纯角。
希望它可以帮助你:)
我的html：
https://github.com/fragaria/angular-daterangepicker
指示：
<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);
});
}
}
}])
我知道这是旧的。但是，如果有人正在努力让这对角1.6这里是我的答案：
指示：
//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");
}
}]);
HTML：
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>`
};
});