DateTime is not the same value in the Data Base using angularJs - angularjs

Question

This is The Data in the sql db
and this is the AngulaJJ Ui-Calendar
The Problem is: the data in the db presented with another values in the UI
'use strict';
app.controller('eventController', ['$scope', 'uiCalendarConfig', '$http', 'ngAuthSettings', function ($scope, uiCalendarConfig, $http, ngAuthSettings) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
$scope.SelectedEvent = null;
var isFirstTime = true;
$scope.events = [];
$scope.eventSources = [$scope.events];
//get the events data from server
$http.get(serviceBase + 'api/Event/GetEvents', {
cache: true,
params: {}
}).then(function (data) {
//get and push events data to calendar here
console.log(data.data);
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function (value) {
$scope.events.push({
title: value.EventTitle,
description: value.EventDescription,
start:parseInt(value.StartDate),
end: parseInt(value.EndDate),
allDay: value.IsFullDay,
stick: true
});
});
});
//Calender configration in angular
$scope.uiConfig = {
calendar: {
height: 700,
editable: true,
displayEventTime: false,
header: {
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
eventClick: function (event) {
$scope.SelectedEvent = event;
},
eventAfterAllRender: function () {
if ($scope.events.length > 0 && isFirstTime) {
//Focus first event
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
isFirstTime = false;
}
}
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1 class="form-login-heading">Calendar</h1>
<div ng-controller="eventController">
<div class="row">
<div class="col-md-12 col-lg-12">
<div id="calendar" ui-calendar="uiConfig.calendar" class="bold blue" ng-model="eventSources" calendar="myCalendar"></div>
</div>
<div class="row col-md-4 text-center center">
<div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">
<h2 style="margin-top:0px"> Selected Event:</h2>
<h3 style="color:#A9A50E">{{SelectedEvent.title}}</h3>
<p>{{SelectedEvent.description}}</p>
</div>
</div>
</div>
</div>
I used:
start: new Date(parseInt(value.StartDate)) > Not Working
and also used:
the data type in the db of this col > DateTime , Date , nvarchar. > Not Working and Same Error.
To sum up:
The problem is: in db the date = 2018-09-09 but in the Ui-view( using angularJS) date = 1-1-1970.
I need to know where is the problem, and how to solve it

Answer 1

The date you have received from service is in string format you need to convert it to javascript date object.
so in your case you can do it as follows
start: new Date(value.StartDate)