Currently, I am in the process of developing an angular directive that is designed to manage date and time functions. I have integrated Angular's UI Bootstrap into my project but have encountered a peculiar issue with the TimePicker component. While the TimePicker initially displays the starting time (set to the current time by default), attempting to adjust the time using the up/down arrows results in both fields showing 'NaN,' and upon inspecting the date, it indicates an invalid date format. Below is the snippet of my code:
utilisyncApp.directive("questionDateTime", [
"$log",
function ($log) {
return {
restrict: "E",
templateUrl: "/app/directives/utilisyncItem/utilisyncQuestion/questionDateTime/questionDateTime.html",
scope: {
item: '='
},
link: function ($scope, $element, $attrs) {
$scope.mStep = 1;
$scope.hStep = 1;
$scope.dateFormat = 'dd-MMM-yyyy'
$scope.popup = { isOpen: false };
$scope.dateTime = { time: new Date() };
$scope.openDate = openDate;
$scope.changed = changed;
init();
function init() {
if ($scope.item.question.defaultToCurrent) {
$scope.dateTime.date = new Date();
}
}
function openDate() {
$scope.popup.isOpen = true;
}
function changed() {
var date = $scope.dateTime.date;
var time = $scope.dateTime.time;
if ($scope.item.question.includeTime) {
$scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), time.getHours(), time.getMinutes(), 0);
}
else {
$scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0);
}
}
}
};
}
]);<div class="form-group">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="dateTime.date" ng-change="changed()" is-open="popup.isOpen" datepicker-options="dateOptions" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDate()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="true"></uib-timepicker>
</div>I am following the example from their website very closely, yet it appears not to be functioning correctly for me, and I cannot determine why.