如何根据用户使用 Angular ui datepicker 选择的日期填充日期表？答案

【问题标题】：How do I populate a table with dates based on a date that a user has selected with angular ui datepicker?如何根据用户使用 Angular ui datepicker 选择的日期填充日期表？
【发布时间】：2017-07-19 20:54:48
【问题描述】：

我希望能够用 24 天填充一个表，每一个都比前一天增加一天。例如，如果选择了 2017 年 7 月 1 日，我想用 2017 年 7 月 2 日、2017 年 7 月 3 日、2017 年 7 月 4 日...2017 年 7 月 5 日来填充表格。

我之前使用的是 Jquery 的 datepicker，并通过这样做让一切正常：

<p id="dateStuff">
  Date: <br />
  <input type="text" id="datepicker">
</p>

脚本：

for (var i = 1; i <= 24; i++) {
  var result = new Date(currentDateString);
  var someFormattedDate = 0;
  result.setDate(result.getDate() + 1);
  var dd = result.getDate();
  var mm = result.getMonth() + 1;
  if (mm < 10) {
    someFormattedDate = '0'+ mm + '/' + dd + '/' + y;
  }
  else {
    someFormattedDate = mm + '/' + dd + '/' + y;
  }
  currentDateString = someFormattedDate;
  document.getElementById("date" + i).appendChild(document.createTextNode(currentDateString));
}

现在我正在尝试使用 angular ui datepicker (http://angular-ui.github.io/bootstrap/#!#datepicker)，并且我正在努力弄清楚如何让它以类似方式工作。

这是我当前代码的 sn-ps：

<div class="form-group">
  <label for="cpDate">Date</label>
  <div class="input-group">
    <input id="inputStartDate" type="text" ng-model="sc.model.date" class="form-control" ng-required="true"
      ng-focus="isDatePickerStartOpened=true"
      uib-datepicker-popup="MM-dd-yyyy"
      datepicker-options="datepickerOptions"
      is-open="isDatePickerStartOpened"
      close-text="Close"/>
    <span class="input-group-btn">
      <button type="button" class="btn btn-default form-control" ng-click="sc.showDatePickerStart($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </div>
</div>

脚本：

var vm = this;
vm.model = {
  date: new Date(),
};
alert(vm.model.date.toString().substring(4, 15));

我被卡住了，因为当警报以 2017 年 7 月 19 日而不是 2017 年 7 月 19 日的形式向我显示日期时。我也不知道如何获取月份、日期等并像以前一样添加它。

【问题讨论】：

标签： javascript angularjs datepicker

【解决方案1】：

首先，您似乎在模板中使用sc.model.date 而不是vm.model.date。

其次，Angular 有一个内置的日期过滤器，可让您轻松格式化日期（确保将 $filter 提供程序注入控制器，就像注入 $scope 一样）：

var formattedDate = $filter('date')(vm.model.date, 'MM/dd/YYYY');
alert(formattedDate);

第三。使用 Angular 与使用 JQuery 或普通 JS 完全是关于模型而不是关于 DOM。您不使用选择器来定位 DOM 对象。相反，您首先从模型开始工作。因此，只需专注于获取所需的日期对象数组即可：

vm.dates = [vm.model.date];

for(var i=1; i<=24; i++) {
  vm.dates.push(addDays(vm.model.date, i));
}

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return $filter('date')(result, 'MM/dd/yy');
}

所以现在你有了一个包含所有你想要的日期的数组。您可以使用 Angular 的 ng-repeat 来显示您的表格：

<table>
 <thead>
  <tr><td>Date</td></tr>
 </thead>
 <tbody>
   <tr ng-repeat="day in vm.dates">
    <td>{{day}}</td>
   </tr>
 </tbody>
</table>

【讨论】：