I am trying to update a date dynamically from a user clicking a forward or backward button, but can't seem to figure out how to make the data change from the view.
The variable date changes but not from the browser.
< July 31, 2017 >
Example pic
EDIT: I had originally put my methods inside the constructor (I don't have it that way in my code, but rather me mistyping it in the question here)
App Component
export class AppComponent {
date: Date;
constructor () {
this.date = new Date();
}
dateForward() {
this.date.setDate(this.date.getDate() + 1);
}
dateBack() {
this.date.setDate(this.date.getDate() - 1);
}
}
HTML Template
<i (click)="dateBack()" class="fa fa-chevron-left" ></i>
<a>{{date | date:'MMM d, y'}}</a>
<i (click)="dateForward()" class="fa fa-chevron-right"></i>
Beside not puting your methods inside your constructor you should pay attention to change detection and immutability
this.date.setDate(this.date.getDate() + 1) will not trigger change detection, to enforce that you need this.date = new Date(this.date.setDate(this.date.getDate() + 1));, the change detector will notice the change only if you change to a different object entirely and not when you set an object properties, same thing with arrays
constructor() {
this.date = new Date();
}
dateForward() {
this.date = new Date(this.date.setDate(this.date.getDate() + 1));
}
dateBack() {
this.date = new Date(this.date.setDate(this.date.getDate() - 1));
}
You should not put your functions in your constructor. Instead, you should create methods in your class, this will allow you to call them in your HTML template.
public date: Date;
constructor() {
this.date = new Date();
}
public dateForward = () => this.date.setDate(this.date.getDate() + 1);
public dateBack = () => this.date.setDate(this.date.getDate() - 1);
methods should not be inside constructor
date :Date;
constructor() {
this.date = new Date();
}
dateForward() {
this.date = new Date(this.date.setDate(this.date.getDate() + 1));
}
dateBack() {
this.date = new Date(this.date.setDate(this.date.getDate() -1 ));
}
Working Plunker link
in angular inside controller you can define a $scope variable lets say you call that variable date.
e.g. $scope.date = new Date().getDate();
Then inside your html you can access it
<div> {{date}} </div>
And whenever you click your call to action buttons you can change the value of this $scope variable and as soon as it will change the value of HTML will be updated automatically.
You can run the following code to see the example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{date | date:'MMM d, y'}}</h1>
Back
Forward
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.date = new Date();
$scope.dateBack = function(){
$scope.date.setDate($scope.date.getDate() - 1);
};
$scope.dateForward = function(){
$scope.date.setDate($scope.date.getDate() + 1);
};
});
</script>
</body>
</html>
Related
Problem description:
There is an availability calendar which displays whether a person is busy on a particular slot (each day is divided to two slots). This state is stored in the isSlotFree boolean 2d array (this array is of size 31 x 2). Initially, all values in this array are initialized to true. Then, a http get request is made to a server requesting the busy dates. Once they are received, the function setIsSlotFree() is called to set the appropriate values in the array to false. In the view (HTML file) there is a <td> element for each slot. Each of these elements update their color (using class styles) based on the boolean value stored in the relevant index of the array. The problem is that the html page does not reflect the changes made to the array after calling the setIsSlotFree() function. (ie. the html elements still see all values as true). However, when I print the array in the console right after the get request, it has changed the appropriate values to false. When any event is triggered, then only the view is updated to the correct values. What is the problem here?
Following are the relevant parts of the component.ts file
export class CalendarComponent implements OnInit {
viewDate: Date;
isSlotFree: boolean[][] = [
[true, true]
];
constructor(private http: HttpClient) {
}
ngOnInit() {
this.viewDate = new Date();
var i: number;
var j: number;
for (i = 1; i < 31; i++) {
this.isSlotFree.push([true, true]);
}
let p = new HttpParams().set('month', (this.viewDate.getMonth() + 1).toString());
this.http.get < busyDateResponse[] > ("http://localhost:51967/api/stylists/getBusyDates", {
params: p
}).subscribe(res => {
this.setIsSlotFree(res);
});
this.x = true;
console.log(this.isSlotFree);
this.viewDate = new Date();
}
setIsSlotFree(res: busyDateResponse[]): void {
var busy_date: busyDateResponse;
for (busy_date of res) {
var temp: number = (busy_date.slot == 'm') ? 0 : 1;
this.isSlotFree[busy_date.day - 1][temp] = false;
}
}
}
interface busyDateResponse {
$id: string;
day: number;
month: number;
year: number;
slot: string;
}
Following shows the relevant parts of the component.html file
<ng-template #cellTemplate let-day="day" let-locale="locale">
<div class="cal-cell-top">
<div class="cal-day-number w3-xlarge">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</div>
<br>
</div>
<div *ngIf="day.inMonth && day.isFuture">
<table style="width:100%">
<tr>
<td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][0], 'w3-red': !isSlotFree[day.date.getDate()-1][0]}">{{isSlotFree[day.date.getDate()-1][0]}}Morning</td>
<mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m'"
*ngIf="isSlotFree[day.date.getDate()-1][0]"></mat-checkbox>
</tr>
<tr>
<td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][1], 'w3-red': !isSlotFree[day.date.getDate()-1][1]}">{{isSlotFree[day.date.getDate()-1][1]}}Evening</td>
<mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e'"
*ngIf="isSlotFree[day.date.getDate()-1][1]">
</mat-checkbox>
</tr>
</table>
</div>
</ng-template>
<div>
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)" (dayClicked)="dayClicked($event)" [cellTemplate]="cellTemplate" [refresh]="refresh">
</mwl-calendar-month-view>
<div class="w3-center">
<button mat-raised-button>Make booking</button>
</div>
</div>
Please note that <mwl-calendar-month-view> utilizes the ng-template to generate cells in a calendar.
Well I finally found the solution after reading a lot about change detection in angular. The change detection strategy is executed before running the setIsSlotFree() function.Even though the values in the array are modified, the change detection strategy is not executed when the array values are changed by this function. Therefore, change detection needs to be executed manually after writing all the changes to the array. This can be done using ChangeDetectorRef.detectChanges() at the end of the setIsSlotFree() function.
If the constructor for the component is constructor(private http: HttpClient, private ref: ChangeDetectorRef) then, the isSlotFree() function would look like,
setIsSlotFree(res:busyDateResponse[]):void {
var busy_date:busyDateResponse;
for(busy_date of res) {
var temp:number = (busy_date.slot=='m')?0:1;
this.isSlotFree[busy_date.day-1][temp] = false;
}
this.ref.detectChanges();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
I have a startDate model which I have bound to a bootstrap date picker and timepicker. When I increase the time in the Time picker and it passes midnight, I need to have the model increase its date as well. Following is my existing code.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope) {
$scope.hstep = 1;
$scope.mstep = 15;
$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = !$scope.ismeridian;
};
$scope.today = function() {
$scope.startDate = new Date();
};
$scope.startDateState = {
opened: false
}; /* Model to keep track if Popup is open */
$scope.today(); /* Sets Date as Today Initially */
$scope.showWeeks = false; /* Hides Week Numbers */
$scope.minDate = new Date(); /* Disables past dates */
$scope.format = 'dd MMM, yyyy'; /* Date Format Setting */
$scope.dateOptions = {
startingDay: 1,
showWeeks: false,
}; /* to be passed in the date-options directive */
$scope.open = function() {
$scope.startDateState.opened = true;
}; /* Button Click Event to open Popup */
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Start date is: <em>{{startDate| date:"MM/dd/yyyy 'at' h:mma"}}</em></pre>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="startDate" is-open="startDateState.opened" on-open-focus="false" min-date="minDate" show-button-bar="false" datepicker-options="dateOptions" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<uib-timepicker ng-model="startDate" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
</div>
</div>
</div>
</body>
</html>
How to approach this problem?
Akash,
The way I approached the problem was to use the ng-change directive on the date input field.
HTML
<input ... ng-change="startDateChanged({{startDateTime}})"></input>
You will notice that the parameter being passed to the controllers scope function is a literal expression. The reason for this is so that we can compare what the original value of the ng-model date object was before it was modified by the up or down arrows from the time picker.
Controller
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var twelveAm = 0;
var oneAm = 1;
var elevenPm = 23;
$scope.hStep = 1;
$scope.mStep = 15;
$scope.startDateTime = new Date();
$scope.today = new Date();
$scope.datePickerState = {
startDateOpened: false
};
$scope.datePickerOptions = {
"show-weeks": false
};
$scope.open = () => {
$scope.datePickerState.startDateOpened = true;
};
$scope.startDateChanged = (originalModel) => {
var nd = _.clone($scope.startDateTime);
var od = new Date(originalModel);
if (nd.getHours() === twelveAm) {
if (od.getHours() === elevenPm) {
nd.setDate(nd.getDate() + 1);
$scope.startDateTime = nd;
} else if (od.getHours() === oneAm) {
nd.setDate(nd.getDate() - 1);
$scope.startDateTime = nd;
}
}
};
});
Inside the method $scope.startDateChanged(), I first create two new date objects, one holding the value of the original datetime (the expression that was passed in) and another with the new datetime. Then I check to see if the new datetime (nd) has a value of 12 AM. If it does, I then check to see if the original datetime (od) has a value of 11 PM or 1 AM and act accordingly (if its 11 PM, it means the button we pushed was to increase the time and therefore the day, otherwise, we are lowering the time and henceforth the day)
I've included a Plunker to illustrate the example.
https://plnkr.co/edit/dDMfpXmy3JBEjXzOca9v
I was trying to hack my way around with the metro.js datepicker and knockout. So far my datepicker binding code looks like:
ko.bindingHandlers.datepicker = {
init: function(el, va, ba, model, ctx) {
var prop = va();
$(el).datepicker({
onSelect: function(txt, date) {
prop(date);
}
});
},
update: function(el, va, ba, model, ctx) {
var prop = va();
var date = ko.unwrap(prop);
if(date) {
applyDate(date);
}
function applyDate(dt) {
var j = $(el);
var dp = j.data('datepicker');
var inp = j.find('input');
var fmt = dp.options.format;
var sDate = format(fmt, dt);
// dp._calendar.calendar.dayClick(sDate, dt);
// inp.value = sDate;
dp._calendar.calendar('setDate', sDate);
j.find('input').val(dp._calendar.calendar('getDate')).trigger('change', sDate);
}
function format(fmt, dt) {
fmt = fmt.replace('yyyy', dt.getFullYear());
fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
fmt = fmt.replace('dd', pad(dt.getDate()));
return fmt;
}
function pad(n) {
return parseInt(n) < 10 ? '0' + n: '' + n;
};
}
}
Issue is that when I issue a model update on the date property its bound to the datepicker doesn't update. I mean, it does it the very first time, but post that, it fails to update the textbox; calendar shows okay however. Ultimately I need to change the logic in the applyDate function...
JSBin: http://jsbin.com/rupaqolexa/1/edit?html,js,output
Update: Another issue just cropped up...it doesn't work in IE 10+. The date appears as NaN in the UI...
Update: Steps for reproduction
type date 2nd text box: 2013/05/13 & click on the Change button. Observe date is updated in the datepicker textbox. This works as expected. (Except in IE).
type another date in the textbox & click the change button. Observe the date is not updated in the datepicker textbox. Expected here that the datepicker textbox updates with latest value.
In the update part of your custom binding you need to make all the changes to the bound elements, which include the calendar widget, and the related input element.
I've modified the code to do so, so that it now works.
function ViewModel(date) {
var model = this;
model.date = ko.observable(date);
model.set = function() {
var val = $('#somedate').val();
var dt = new Date(val);
model.date(dt);
};
}
ko.bindingHandlers.datepicker = {
init: function(el, va, ba, model, ctx) {
var prop = va();
$(el).datepicker({
onSelect: function(txt, date) {
prop(date);
}
});
},
update: function(el, va, ba, model, ctx) {
var newDate = ko.unwrap(va());
if(newDate) {
var $el = $(el);
var datePicker = $el.data('datepicker');
var $input = $el.find('input');
var formattedDate = format(datePicker.options.format, newDate);
datePicker._calendar.calendar('setDate', formattedDate);
$input.val(formattedDate);
//$input.val(dp._calendar.calendar('getDate'))
// .trigger('change', sDate);
}
function format(fmt, dt) {
fmt = fmt.replace('yyyy', dt.getFullYear());
fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
fmt = fmt.replace('dd', pad(dt.getDate()));
return fmt;
}
function pad(n) {
return parseInt(n) < 10 ? '0' + n: '' + n;
}
}
};
var m = new ViewModel();
$(function(){
ko.applyBindings(m);
});
<link href="//metroui.org.ua/css/metro.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-icons.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-responsive.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/metro-schemes.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div>
<div class="input-control text" data-bind="datepicker: date">
<input type="text">
<button class="button"><span class="mif-calendar"></span></button>
</div>
</div>
<div>
<label>Date</label>
<div class="input-control text">
<input type="text" id="somedate"/>
</div>
<input type="button" class="button" value="Change" data-bind="click: set"/>
</div>
<div>
<code data-bind="text: date"></code>
</div>
However there is still a little hiccup: the datepiceker's calendar setdate adss new selected date, instead of replacing selected ones. Please, see the API docs to solve this yourself.
I want to filter data by event date. I have the following options to filter: current day, current month and current year. Below you can see what I have so far:
function dateCtrl($scope) {
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
$scope.dateToday = Date.parse(curr_month + "/" + curr_date + "/" + curr_year);
$scope.dateRange = "";
$scope.dataModels = [
{age:5,name:'John Lennon',eventDate:"1390524400000"},
{age:12,name:'Nick Young',eventDate:"1377500400000"},
{age:10,name:'Mike Johnson',eventDate:"1374044400000"},
{age:15,name:'Lisa Leslie',eventDate:"1335942000000"}
];
$scope.eventDateFilter = function(column) {
if(column === 'today') {
$scope.dateRange = $scope.dateToday;
} else if (column === 'currentWeek') {
//need logic
} else if (column === 'currnetMonth') {
//need logic
} else if (column === 'currnetYear') {
//need logic
}else {
$scope.dateRange = "";
}
}
}
and here I have the controller:
<div ng:controller="dateCtrl">
Date Filter
<ul class="inline">
<li><a href ng-click="eventDateFilter('all')">All</a></li>
<li><a href ng-click="eventDateFilter('today')">Today</a></li>
<li><a href ng-click="eventDateFilter('pastWeek')">Past Week</a></li>
<li><a href ng-click="eventDateFilter('pastMonth')">Past Month</a></li>
</ul>
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Event Date</th>
</tr>
<tr ng:repeat="data in dataModels | filter:dateRange">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.eventDate | date:medium}}</td>
</tr>
</table>
</div>
I have the entire code here : The code
Original Answer
First, let me paraphrase your question (to make sure I answer to what you asked), as I'm not 100% sure about it:
I have a list of {age: <Number>, name: <String>, eventDate: <Timestamp>} objects and I want to filter them by their eventDate property. E.g. I want only objects with a eventDate in the current week.
To achieve this you have to minimally reorder your Controller:
$scope.dateRanges = {
all: {from: 0, to: Number.MAX_VALUE},
// defining getCurrent[Week,Month,Year]Range() left open for you,
// https://stackoverflow.com/questions/8381427/ is a good start
week: getCurrentWeekRange(),
month: getCurrentMonthRange(),
year: getCurrentYearRange(),
};
$scope.currentDateRange = $scope.dateRanges.all; // as initial value
$scope.eventDateFilter = function(event) {
return $scope.currentDateRange.from <= event.eventDate
&& event.eventDate <= $scope.currentDateRange.to;
});
Then you can use it in the template as
<ul>
<li ng-click="currentDateRange = dateRanges.all">show all</li>
<li ng-click="currentDateRange = dateRanges.week">show week</li>
<li ng-click="currentDateRange = dateRanges.month">show month</li>
<li ng-click="currentDateRange = dateRanges.year">show year</li>
</ul>
<table>
<tr ng-repeat="data in dataModels | filter:eventDateFilter">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.eventDate | date:medium}}</td>
</tr>
</table>
The important difference is that you don't call functions on ng-clicking your navigation, but just change the model (and let angular update the view).
This is what we were used to do (from jQuery & the likes) for years. But with angular you need a mind shift. The template views the model and updates automatically once the model changes. You don't have to initiate those updates yourself.
Edit: getCurrentDayRange()
As the question arose in the comments, here's how you create a range (e.g. for the current day). It is heavily inspired by this answer to the question I cited above.
function getCurrentDayRange() {
// new Date() returns the moment it is called by default
return {
// the day starts at 00:00:00.000
from: new Date().setHours(0, 0, 0, 0),
// it ends at 23:59:59.999
to: new Date().setHours(23, 59, 59, 999)
};
}
On the question when to call eventDateFilter: it gets called by the AngularJS digest loop, you never call it yourself. See the Scope documentation for a deep-dive.
To simplify the calculation you could use moment.js
function getCurrentDayRange() {
return {
from: moment().startOf('day'),
to: moment().endOf('day')
};
}
function getCurrentWeekRange() {
return {
from: moment().startOf('week'),
to: moment().endOf('week')
};
};
function getCurrentMonthRange() {
return {
from: moment().startOf('month'),
to: moment().endOf('month')
};
}
function getCurrentYearRange() {
return {
from: moment().startOf('year'),
to: moment().endOf('year')
};
}
Working with moment datepicker in my project i can't see where my error is.
Basically what i want to do is make a suscription to source property in order to know when th property change (the time to load to service method). So follwoing some urls i was able to build this basic example:
var model = {
test_date: ko.observable(new Date('2012/12/12'))
};
ko.applyBindings(model, $("#target")[0]);
model.test_date.subscribe(function (newValue) {
alert("new selection :" + newValue);
});
http://jsfiddle.net/rolandomartinezg/x7Zt3/5/
The code above is simple and works, my trouble begin in my production code where for some strange reason the code realted to suscription is not fired.
short example (in production code I am typescript):
export var fromDate = ko.observable(new Date('2012/12/12'));
fromDate.subscribe(function (newValue) {
alert("new selection of date");
});
I tried find some missing reference from my jsfiddle example and my production code and both are using the same libraries (moment.js, moment-datepicker.js, moment-datepicker-ko.js,/knockout.js.
what i am doing wrong? any tip?
UPDATE 1: My production code converted from typescript to js:
define(["require", "exports", 'services/logger', '../../services/Assessment/datacontext'], function(require, exports, __logger__, __datacontext__) {
var logger = __logger__;
var datacontext = __datacontext__;
exports.title = 'AssessmentListing';
exports.fromDate = ko.observable(new Date('2012/12/12'));
exports.toDate = ko.observable(new Date('2012/12/12'));
function activate() {
loadInitData();
}
exports.activate = activate;
function loadInitData() {
var focusDate = ko.observable(new Date('2013/07/06'));
exports.fromDate = ko.observable(firstDayOfMonth(focusDate));
exports.toDate = ko.observable(getLastDayOfMonth(focusDate));
// calls to services
}
function getLastDayOfMonth(focusDate) {
var d = new Date(Date.apply(null, focusDate));
d.setMonth(d.getMonth() + 1);
d.setDate(0);
return d;
}
function firstDayOfMonth(focusDate) {
var d = new Date(Date.apply(null, arguments));
d.setDate(1);
return d;
}
exports.toDate.subscribe(function (newValue) {
alert("new selection :");
});
exports.fromDate.subscribe(function (newValue) {
alert("new selection");
});
function viewAttached() {
}
exports.viewAttached = viewAttached;
})
UPDATE 2: My VIEW
<div class="span4">
<span><small>From Date:</small> </span>
<div class="input-append date" id="fromDate" >
<input id="fromDatePicker" type="text" data-bind="datepicker: fromDate()" class="input-small">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<span><small>To Date: </small></span>
<div class="input-append date" id="ToDate" >
<input id="toDatePicker" type="text" data-bind="datepicker: toDate()" class="input-small">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
Update 3
Trying use changeDate doesn't work because ev.date is not available.
export function viewAttached() {
$('#fromDatePicker').datepicker()
.on('changeDate', function (ev) {
/*ev.date doesn't work*/
alert('fromdate has changed');
});
}
In your data binding, you have:
datepicker: toDate()
Since toDate is an observable, calling toDate() gets you the value of the observable, so you're passing that instead of passing the observable itself.
Try changing your binding to:
datepicker: toDate
That will enable the datepicker binding handler to update your observable.
Update:
I think this is your second problem. In this function:
function loadInitData() {
var focusDate = ko.observable(new Date('2013/07/06'));
exports.fromDate = ko.observable(firstDayOfMonth(focusDate));
exports.toDate = ko.observable(getLastDayOfMonth(focusDate));
// calls to services
}
...you are replacing the toDate and fromDate properties with new observables which do not have the subscriptions applied that the original observables do. Try attaching the subscriptions after creating these observables, or perhaps instead of creating new observables, just populate them:
function loadInitData() {
var focusDate = ko.observable(new Date('2013/07/06'));
exports.fromDate(firstDayOfMonth(focusDate));
exports.toDate(getLastDayOfMonth(focusDate));
// calls to services
}