I need to be able to store the selected date value as date without time in my ng-model.
Here is my view:
<script type="text/ng-template" id="form_field_datetime">
<h3 style="color:coral ;">{{field.displayName}}</h3>
<br />
<div>
<div ng-controller="dateCtrl">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</script>
On selection of the date shown above the stored value in my ng-model is :
2012-03-12T22:00:00.000Z
I need:
2012-03-13
Here is the controller(pretty much as in example):
app.controller('dateCtrl', ['$scope',
function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 0
};
$scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
}
]);
How to go around this?
I have used the directive I mentioned earlier in the comments of my question to handle the selected date and remove the time info.
<script type="text/ng-template" id="form_field_date">
<h3 style="color:coral ;">{{field.displayName}}</h3>
<br />
<div>
<div ng-controller="dateCtrl">
<p class="input-group">
<input datepicker-localdate type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</script>
Controller(dateCtrl):
app.controller('dateCtrl', ['$scope',
function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 0
};
$scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
}
]);
The directive(datepicker-localdate):
app.directive('datepickerLocaldate', ['$parse', function ($parse) {
var directive = {
restrict: 'A',
require: ['ngModel'],
link: link
};
return directive;
function link(scope, element, attr, ctrls) {
var ngModelController = ctrls[0];
// called with a JavaScript Date object when picked from the datepicker
ngModelController.$parsers.push(function (viewValue) {
console.log(viewValue);console.log(viewValue);console.log(viewValue);
// undo the timezone adjustment we did during the formatting
viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
// we just want a local date in ISO format
return viewValue.toISOString().substring(0, 10);
});
}
}]);
It all works now!