anil chean anil chean - 20 days ago 7
AngularJS Question

How to set Angular UI Bootstrap Datepicker to set empty field by default?

I'm working a date picker using Angular UI Bootstrap Datepicker. My challenge is to set the input field of the date picker to empty field by default.

Let me show u the input field i have used .

<td>
<div>
<input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

</div>
</td>


And my script

$scope.personalDetails.forEach(function(personalDetail){
personalDetail.date = new Date(personalDetail.date);
});

$scope.open = function($event, personalDetail) {
$event.preventDefault();
$event.stopPropagation();

personalDetail.isOpen = true;
};


I'm using it in the html table with ng-repeat . But what i need is to show the date field empty untill i set the respective date. Please help me from this.

Answer
<td>
  <div>
    <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

  </div>
</td>

Your controller should be

$scope.personalDetails.forEach(function(personalDetail){
    //personalDetail.date = new Date(personalDetail.date);//sets the value to the control
    personalDetail.date = "";
  });

  $scope.open = function($event, personalDetail) {
    $event.preventDefault();
    $event.stopPropagation();

    personalDetail.isOpen = true;
  };