Convert string to date on an input date inside an angularjs repeater

Question

I have a repeater with table row where I have a date, which could be edited. The problem is I can not set the model with string instead of a date object and is not possible to apply a filter on an date input. Which could be the workaround here?

Thanks

<tr data-ng-repeat="item in collection">
    <td data-ng-bind="item.name"></td>
    <td data-ng-bind="item.sharedDate | date:'MMMM dd, yyyy'"></td>
    <td>
        <span data-ng-bind="item.note"></span>
        <textarea data-ng-model="item.note"></textarea>
    </td>
    <td>
        <span data-ng-bind="item.expiryDate | date:'MMMM dd, yyyy'"></span>
        <input type="date" class="form-control" id="expiryDate" data-ng-model="(item.expiryDate | date:'MM/dd/yyyy')">
    </td>

can it be converted to a Date object? e.g. $scope.yourDateThing = new Date(your date val) — scniro
– scniro, Commented Jan 13, 2015 at 16:09
The loop is in the view using ngRepeat, the idea was not to have to convert it on the controller. Thanks — andy_314
– andy_314, Commented Jan 13, 2015 at 17:00

Reactgular · Accepted Answer · 2015-01-13 16:09:58Z

2

data-ng-model is a 2-way data binding and you can not use an expression. It must reference a scope variable so that ngModel can read and write.

If the value of item.expiryDate is not in the correct format for ngModel then you have to pre-process this in the controller before it's used in the template.

You'll need do something like this first in the controller or directive.

_.each($scope.collection,function(item) { item.expiryDate = $filter('date')('MM/dd/yyyy'));

Now in your template you can use ngModel as a 2-way data binding on that value.

<input type="date" class="form-control" id="expiryDate" data-ng-model="item.expiryDate">

answered Jan 13, 2015 at 16:09

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andy_314 Over a year ago

Thanks @Mathew. I wanted to avoid to loop the object on the controller, but seems like is what I have to do.

Collectives™ on Stack Overflow

Convert string to date on an input date inside an angularjs repeater

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related