MrBuggy MrBuggy - 2 months ago 15
AngularJS Question

Check if current date / time match with defined timespans

Hi I've got follow code:



angular.module("myApp", []).controller("myController", function($scope) {
$scope.currentOption;

$scope.setCurrentTimespan = function() {
//CODE HERE
};

$scope.timespanList = [{
id: 1,
name: 'morning',
startDate: '19.09.2016 06:00',
endDate: '19.09.2016 11:59'
}, {
id: 2,
name: 'noon',
startDate: '19.09.2016 12:00',
endDate: '19.09.2016 13:29'
}, {
id: 3,
name: 'afternoon',
startDate: '19.09.2016 13:30',
endDate: '19.09.2016 18:29'
}, {
id: 4,
name: 'evening',
startDate: '19.09.2016 18:30',
endDate: '19.09.2016 23:59'
}, {
id: 5,
name: 'night',
startDate: '20.09.2016 00:00',
endDate: '20.09.2016 05:59'
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
<select ng-options="option as option.name for option in timespanList" ng-model="currentOption"></select>
</div>





I've got from the backend a object with items for my
select
. In this list there are some timespans like morning, noon, afternoon etc. This timespans have a startDate and an endDate, which also comes from the backend. For example, the timespan "morning" has follow startDate/endDate: [todays date] 06:00 / [todays date] 11:59. So what I want to do is, when I load the list and fill the
select
with
ng-options
, I would like to select the item from the list, which matches with the current timestamp. So I have to get the current date and time for example: 19.09.2016 09:45 and than search in the list the item which is defined for this timestamp and select it in the list. So I have to check the startDate/endDate with the current date / time. This should happen when the list was loaded.

So the result for my local time (19.09.2016 09:45) at this moment would be morning.

Has someone an idea how to do this? I didn't find any answers which can help me...Thanks

EDIT WITH SOLUTION:

I've found a perfect way to solve this problem: I found
moment.js
, which solves my requirements. After including it into my web app I start to use the queries and functions from
moment.js
to solve my problem. It works like this:

Get current timestamp (day, month, year, hour and minutes):

let currentTimestamp = moment(); //for example 19.09.2016 11:30


Than I loop throught my array with the timespans and parse the startDate/endDate with the
moment.js
to my required
format
DD.MM.YYYY HH:mm
and then I can use the
moment.js
query
isBetween()
to check, if my currentTimestamp is between the startDate/endDate of each item like this:

this.timespanList.forEach(function(item) {
let startDate = moment(item.startDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 06:00
let endDate= moment(item.endDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 11:59

if(moment(currentTimestamp).isBetween(startDate, endDate)) {
$scope.currentOption = item;
}
});


So if the condition of the looped item is true, I can set the right option in my list. Here are some links of
moment.js
which describe, how to use it correcty - it's awesome!

moment.js docs: http://momentjs.com/docs/

moment.js parsing: http://momentjs.com/docs/#/parsing/

moment.js queries: http://momentjs.com/docs/#/query/

I hope this is usefull! An alternative solution from the answers which also would work is marked as correct. Thanks and cheers.

Answer

You can implement a custom filter to achieve this.

<select ng-options="option as option.name for option in timespanList | momentFilter" ng-model="currentOption"></select>

.filter('momentFilter',function(){
            return function (object) {
                var array = [];
                angular.forEach(object, function (time) {
                        if(time.startDate.split(" ")[1] == '06:00' && time.endDate.split(" ")[1] == '11:59'){
                          array.push(time);
                        }
                });
                return array;
            };
        });

I have created a working plunker here.

Do little more work around to achieve this.