how to set initial value or default value in date field?

Question

I am trying to implement a date picker in angularjs and bootstrap but I am facing a few issues:

• initial date is not set
• when I am trying to open one date picker why does it open all the date pickers?

Here is my code: http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW?p=preview

$scope.dateOptions = {
  maxDate: new Date(2020, 5, 22),
  minDate: new Date(1970,1,1),
  startingDay: 1
};
function disabled(data) {
 return true
}

$scope.open1 = function() {
  $scope.popup1.opened = true;
};

$scope.formats = ['dd-MMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.popup1 = {
  opened: false
};

Why does it open all date pickers when only one is clicked? See image below.

Answer 1

initial date is not set

This is because you are setting the model to a string, but it requires an actual date object. Do this:

date: {
  date: 'date',
  name: d // not this -> moment(d).format('DD-MMM-YYYY')
}

when I am trying to open one date picker why does it open all the date pickers?

Since you're using ng-repeat to create multiple inputs, you need to also use separate properties for the is-open attribute on each input. I would suggest adding an opened property to the items you're repeating, like this:

date: {
  date: 'date',
  name: d,
  opened: false
}

Then, on the click event of the button, pass in the repeated item:

ng-click="open1(x)"

Next, set the is-open attribute:

is-open="x.opened"

Finally, set the opened property on it like this:

$scope.open1 = function(x) {
  x.opened = true;
};

Here is the plnkr.