I've encountered an issue while trying to utilize the angular date time picker. It seems that when I load data from the model, the picker does not bind the value correctly.
If I manually set the value to a date, it works fine. However, when the data is loaded from the model, the picker fails to display the correct value.
http://plnkr.co/edit/eeTQFo5jz4RYN6nSYxdZ?p=preview
I have incorporated the datetimepicker for use with angular.
angular:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.date = '01/02/1983 01:02:03';
});
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
dateFormat:'dd/MM/yyyy',
timeFormat: 'hh:mm:ss',
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
HTML:
<div class="container container-fluid" ng-controller="MainCtrl">
2+2={{2+2}}, var1={{var1}}
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<div class="well">
<div id="date" class="input-append" datetimez ng-model="var1">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" ng-value="date"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>