Search code examples
javascriptangularjsdatepickeruidatepickerangular-ui-datepicker

Angularjs fullDate filter not working

I'm getting following error on using fullDate filter inside my html:

Error: [ngModel:nonassign] Expression 'publisherForm.dt | date:'fullDate'' is non-assignable. Element:

Here is my jade code:

datepicker.well.well-sm(ng-model="publisherForm.dt", show-weeks="false", min-date="minDate")

input.form-control(type="text", ng-model=" publisherForm.dt | date:'fullDate' ", readonly='')

what I'm trying is show the selected date from ui-datepicker to user in another input field. Since I want to show only date, I'm using fullDate filter but in console I'm getting above mentioned error.

Any idea what can be the possible reason ?

Solution

  • On searching through existing threads on SO, I found following threads which helped me to solve my problem:

    Using angularjs filter in input element How to format a date using ng-model? AngularJS get formatted date in ng-model

    Finally made following lines of code change and it started working fine for me:

    $scope.$watch('publisherForm.dt', function(newVal){
  $scope.publisherForm.formattedDate = $filter('date')($scope.publisherForm.dt, 'fullDate');
});

    If there is anyone who can suggest a better solution is always welcome.

    Thanks