如何在日期字段中设置初始值或默认值？

Question

我正在尝试在angularjs和bootstrap中实现日期选择器，但是我遇到了一些问题：

• 未设置初始日期
• 当我尝试打开一个日期选择器时，为什么要打开所有日期选择器？

这是我的代码： 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
};

为什么只单击一个日期选择器就会打开所有日期选择器？参见下图。

Answer 1

  

未设置初始日期

这是因为您要将模型设置为字符串，但是它需要实际的日期对象。这样做：

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

  

当我尝试打开一个日期选择器时，为什么要打开所有日期选择器？

由于您正在使用ng-repeat创建多个输入，因此还需要为每个输入的is-open属性使用单独的属性。我建议将opened属性添加到您要重复的项目中，如下所示：

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

然后，在按钮的click事件上，传递重复的项目：

ng-click="open1(x)"

接下来，设置is-open属性：

is-open="x.opened"

最后，像这样设置opened属性：

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

Here is the plnkr.