Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I hope I haven't missed anything obvious in the doco, if I have I'm sure someone will help.

I'm using asp.net webapi to return a DTO, with date fields. These are serialized using JSON.Net (in format '2013-03-11T12:37:38.693').

I'd like to use a filter but in an INPUT element, is this possible or should I create a new filter or directive to accomplish this?

-- this just displays the text value
<input ui-datetime type="text" data-ng-model="entity.date" /> 
-- this doesn't work at all
<input ui-datetime type="text" data-ng-model="{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}" /> 
-- this works fine
{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}

Is there any shortcut I'm missing?

share|improve this question

3 Answers

up vote 3 down vote accepted

In short: if you want your data to have a different representation in the view and in the model, you will need a directive, which you can think of as a two-way filter.

Your directive would look something like

return {
  require: 'ngModel',
  link: function(scope, element, attrs, ngModelController) {
    ngModelController.$parsers.push(function(data) {
      //convert data from view format to model format
      return data; //converted
    }

    ngModelController.$formatters.push(function(data) {
      //convert data from model format to view format
      return data; //converted
    }    
  }
}
share|improve this answer
up vote 1 down vote

You wouldn't need to create a new filter from zero, since angular has already a built-in filter for date types. http://docs.angularjs.org/api/ng.filter:date

I believe that's exactly what you need.

share|improve this answer
up vote 1 down vote

Having different values in your input field and in your model goes against the very nature of ng-model. So I suggest you take the simplest approach and apply your filter inside the controller, using a separate variable for formatted date, and employing watchers to keep formatted and original dates in sync:

HTML:

<input ui-datetime type="text" data-ng-model="formattedDate" />

JS:

app.controller('AppController', function($scope, $filter){

  $scope.$watch('entity.date', function(unformattedDate){
    $scope.formattedDate = $filter('date')(unformattedDate, 'dd/MM/yyyy HH:mm:ss a');
  });

  $scope.$watch('formattedDate', function(formattedDate){
    $scope.entity.date = $filter('date')(formattedDate, 'yyy/MM/dd');
  });

  $scope.entity = {date: '2012/12/28'};

});
share|improve this answer
I believe creating a new directive to fulfill the requirements is a cleaner solution here. If I understood the OP's problem correctly. – finishingmove Mar 11 at 19:10
You're right. It is cleaner. I just wanted to give @leon an option, in case he/she is not so comfortable with custom directives yet. – Stewie Mar 11 at 19:31
Thanks guys, both answers appreciated as it's great to learn alternative methods. – leon Mar 14 at 16:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.