如何根据用户使用角度用户日期选择器选择的日期填充日期表？

我希望能够用24天填充表格，每个表格都比前一天增加一天。因此，举例来说，如果选择2017年7月1日，我希望在2017年7月2日，2017年7月3日，2017年7月4日... 2017年7月5日之前填写表格。如何根据用户使用角度用户日期选择器选择的日期填充日期表？

我以前使用jQuery的日期选择器，并得到了做这个工作的一切：

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

现在我试图用角UI日期选择器（http://angular-ui.github.io/bootstrap/#!#datepicker）工作，我正在努力弄清楚如何让它的工作类似。

这里是我当前的代码片段：

<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日的形式，而不是最新的7 /二千零十七分之一十九。我也不知道如何获取月份，日期等，并像我以前那样添加到它中。

来源

2017-07-19 bobthebuilder4t5

首先它看起来像你在你的模板中使用sc.model.date而不是vm.model.date。

其次，角有一个内置的日期过滤器，让您轻松格式化日期（请务必将$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>

来源

2017-07-19 21:59:15

如何根据用户使用角度用户日期选择器选择的日期填充日期表？

回答

相关问题