ユーザが角度ui datepickerで選択した日付に基づいて日付をテーブルに設定するにはどうすればよいですか？

Question

私は24日で表を作成できるようにしたいと考えています。たとえば、2011年7月1日が選択された場合、2011年7月2日、2011年7月3日、2011年7月4日... 7/5/2017で表にデータを挿入したいと考えています。私は以前に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時にするので、私はこだわっています/ 19/2017私はまた、月、日などを取得する方法を知りませんし、以前にしたようにそれに追加します。

Answer 1

最初にテンプレートにvm.model.dateの代わりにsc.model.dateを使用しているようです。

第二には、角度を内蔵していますが、簡単にフォーマット日付が（コントローラにあなたが$scopeを注入と同じように$filterプロバイダを注入するようにしてください）することができます日付フィルタ：

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

サード。 JQueryやプレーンJSを扱うAngular vsでの作業は、すべて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'); 
} 

をだから今、あなたがしたいすべての日付を持つ配列を持っています。角度のng-repeatを使用して表を表示することができます。

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