Check if current date / time match with defined timespans - html

Question

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 1

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.

Answer 2

EDIT WITH SOLUTION FROM THE QUESTION:
I put my own solution which is in my edited question here so everyone can see it faster:
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.