current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 4 down vote favorite
2

I'm using AngularJS and Smart Table to show items from Database and Filter the items by Date. I want to use a Datetimepicker (Bootsrap.UI http://angular-ui.github.io/bootstrap/)

My Problem is if I type the text into the input of the Datetime-element it works but if I select a date via Datetimepicker, the text changes but the Filter is not set.

Is there any way to give the smart-table the picked Filter?

My Table Head looks like this:

 <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>
share|improve this question
    
have you got the answer for this? – Narayan May 13 '15 at 17:51
    
I've implemented this using Smart-table and dateRangePicker if it's any help? Let me know and I'll post the code. – dandanknight Sep 3 '15 at 14:38
    
hi, I have same problem, plz post the example , thanks – andy Nov 20 '15 at 6:43
up vote 0 down vote

I know this is not elegant solution But it will work.

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" />
share|improve this answer
    
this don't work to well – Jah Jun 20 at 2:59
up vote 0 down vote

i use this pluging https://github.com/fragaria/angular-daterangepicker as i like the date range and its pure angular.

hope it helps you :)

my 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:

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

Controller

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


}]);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.