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

Question

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.

You are binding the control to the field personalDetail.date, so it will display whatever date is present in that value. Setting value="" probably wont work. — Nick
– Nick, Commented Nov 18, 2016 at 9:42

wloescher · Accepted Answer · 2017-04-01 00:36:34Z

3

<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;
  };

edited Apr 1, 2017 at 0:36

wloescher

4,6132 gold badges28 silver badges27 bronze badges

answered Nov 18, 2016 at 9:49

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

6 Comments

Aravind Over a year ago

@anilchean :) Happy to help you.! btw, can u share ur fb id?

Francesco Over a year ago

It is worth to say, that problems will arise if you need to use the datepicker directive inside a form with validatation. Angular UI datepicker does not accept an empty model as correct and therefore the form will resul invalid. I faced this problem when my datepicker was optional and not initialised to a date inside the form.

wloescher Over a year ago

This worked for me, but I'm checking the date value for a NULL or default value (1/1/1900) before I actually set the scope property. $scope.myDate = !$scope.myDate || new Date($scope.myDate).toISOString() == new Date('1/1/1900').toISOString() ? '' : new Date($scope.myDate);

Aravind Over a year ago

@wloescher I didnt get your question.

wloescher Over a year ago

@Aravind - not a question, just adding some additional info to your answer (by checking for a default date value).

|

user6664928 · Accepted Answer · 2016-11-18 09:51:28Z

1

Change from

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

to

personalDetail.date = "";

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

answered Nov 18, 2016 at 9:51

user6664928

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related