CODEWITHSUNDEEP
angularjsangular-ui-bootstrapbootstrap-datepicker
anil chean
anil chean

Reputation: 473

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.

Upvotes: 2

Views: 6332

Answers (2)

Aravind
Aravind

Reputation: 41571

<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 = !personalDetail.date || new Date(personalDetail.date).toISOString() == new Date('1/1/1900').toISOString() 
        ? '' // Date is null, undeclared, or default value
        : new Date(personalDetail.date);
  });

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

    personalDetail.isOpen = true;
  };

Upvotes: 3

user6664928
user6664928

Reputation:

Change from

personalDetail.date = new Date(personalDetail.date);

to 

personalDetail.date = "";

like $scope.personalDetail={ date: "" }

Upvotes: 1

Related Questions