pick-a-date datepicker set value to empty at time of edit in angularjs

Question

At time of edit form, In below code.. I fetched json from fields to row variable.. It shows value for "row.create_tour.startDate" & "row.create_tour.endDate".. when I print them at start of form .. But, when I assign these models to pick-a-date it will get empty.. what should I do for this? Is there any default setting of pick-a-date? any other option to show value in inputbox having pick-a-date?

Below is the code snippet:

            <div ng-repeat="row in fields"> 
                        <div layout="row"> 
                            <div class="dateField">
                                <md-input-container> 
                                    <label>Start date <span class="requiredStart">*</span> </label>  

                                    <input type="text" name="startDate[$index]" class="inputbox required startDate" pick-a-date="startDate[$index]" pick-a-date-options="options" min-date="create_tour.startDate" ng-model="row.create_tour.startDate" ng-change="updateChildEndDate(row);" required/>
                                    <span style="color:red;font-size: 14px;" ng-show="step3Form.startDate[$index].$dirty &&  step3Form.startDate[$index].$invalid">
                                        <span ng-show="step3Form.startDate[$index].$error.required" >This field is required</span>
                                    </span>  

                                </md-input-container>  
                            </div>
                            <div class="dateField">   
                                <md-input-container>
                                    <label>End date <span class="requiredStart">*</span></label>
                                    <input type="text" name="endDate[$index]"  class="inputbox required endDate"   ng-model="row.create_tour.endDate" pick-a-date="endDate[$index]" min-date="row.create_tour.startDate" required/>
                                    <span style="color:red" ng-show="step3Form.endDate[$index].$dirty && step3Form.endDate[$index].$invalid"> 
                                        <span ng-show="step3Form.endDate[$index].$error.required" >This field is required</span>
                                    </span> 
                                </md-input-container>
                            </div>
                        </div>
            </div>

score 0 · Answer 1 · answered Mar 04 '16 at 12:54

I think your models are slightly wrong. Shouldn't they be

ng-model="row.create_tour.startDate[$index]" and ng-model="row.create_tour.endDate[$index]" respectively.

It is so because ng-repeat creates its own scope and each row should have its unique ng-model.

pick-a-date datepicker set value to empty at time of edit in angularjs

1 Answers1