2017-04-21 16 views
0

どのように私は連続的に前日を得ることができますか?連続して、今日、そして明日の前に日付を取得

<ul> 
<li (click)="prevDay()"></li> 
</ul> 

<div>{{day}}</div> 

JS:

dayBefore() { 
     let now: any = new Date(); 
     this.days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
     this.day = this.days[now.getDay() - 1]; 
} 

私は昨日だけを得るが、私は継続的にそれを必要とするこの方法で例えば、私はこのHTMLを持っています。 <div>{{day}}</div>をもう一度クリックすると、「昨日」の前の日などに必要なので、木曜日、水曜日、火曜日など

EDIT:今日と明日は同じ...

+0

を使用する必要がある変数に減少を追跡するの? – VirtualTroll

+0

はい....正確に。 –

+0

最終編集をご覧ください。 –

答えて

1

あなたは次のことを試すことができます。

<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script> 

<script> 
    function AppComponent() { 
      this.day = ''; 
     this.decrement = 0; 
     this.days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
     this.dayBefore = function() { 

        var now = new Date(); 
      this.decrement+=1; 
      var newDate = this.decrementDays(now, this.decrement); 
      this.day = this.days[newDate.getDay()];    
     }, 
     this.decrementDays = function addDays(date, days) { 
      return new Date(
     date.getFullYear(), 
     date.getMonth(), 
     date.getDate() - days, 
     date.getHours(), 
     date.getMinutes(), 
     date.getSeconds(), 
     date.getMilliseconds() 
     ); 
     } 

    } 

    AppComponent.annotations = [ 
     new angular.ComponentAnnotation({ 
     selector: 'my-app' 
     }), 
     new angular.ViewAnnotation({ 
     template: '<ul>' + 
'<li (click)="dayBefore()">aaaaa</li>' + 
'</ul>' + 
'<div>{{day}}</div>', 
     directives: [angular.NgFor] 
     }) 
    ]; 

    document.addEventListener('DOMContentLoaded', function() { 
     angular.bootstrap(AppComponent); 
    }); 

</script> 

<my-app></my-app> 
+0

「タイプウィンドウにデクリメントがありません」 –

+0

これはどうですか? – VirtualTroll

+0

これはangular2のためのものです。タイプマッチングされていなければなりません。コンポーネントにはデクリメントがありません。 –

1

あなたのコントローラでは、あなたはあなたの今日の日付を持っているだけONCE新しい日付日アレー

private myDate=new Date(); 
private days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
private day = this.days[this.myDate.getDay()];; 

を初期化します。その後、日付を変更するメソッドで日付を更新します。

private dayBefore(){ 
    this.myDate=this.myDate.addDays(-1); 
    this.day= this.days[this.myDate.getDay()]; 
} 

private dayAfter(){ 
    this.myDate=this.myDate.addDays(1); 
    this.day= this.days[this.myDate.getDay()]; 
} 

private restoreToday(){   
    this.myDate=new Date(); 
    this.day= this.days[this.myDate.getDay()]; 
} 

そして、あなたのhtml

<ul> 
    <li (click)="dayBefore()">Prev</li> 
    <li (click)="restoreToday()">Today</li> 
    <li (click)="dayAfter()">Next</li> 
</ul> 

<div>{{day}}</div> 
1

にあなたは、以下のように

currentPos=5; 
    today : string= 'Friday' 
    days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 

    constructor() { 
    this.today=this.days[this.currentPos]; 
    } 
    prev(){ 
    //this.daysArray.push(this.days[this.currentPos]); 
    if(this.currentPos>0){ 
     this.currentPos--; 
     this.today=this.days[this.currentPos]; 

    } 
    else if(this.currentPos==0){ 
     this.today=this.days[0] 
     this.currentPos=6; 
    } 


    } 
} 

LIVE DEMO

関連する問題