Javascript 如何根据用户使用angular ui datepicker选择的日期填充带有日期的表？

我希望能够用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>

---

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

首先，看起来您在模板中使用的是

sc.model.date

而不是

vm.model.date

其次，Angular有一个内置的日期过滤器，允许您轻松格式化日期（请确保将

$filter

提供程序注入控制器的方式与注入

$scope

的方式相同）：

第三,。使用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');
}

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

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

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

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