How to subtract date from current date for last 7 days, last 1 month

Ionic Framework ionic-v3
1

I want to get date after click on dropdown,Here is my dropdownimage
image
I want , After click on Last 7 days then last 7 days date should be calculated. same as for last 1 month and 12 months
This is my home.ts code

export class HomePage {

  public states: any[];
  public districts: any[];
  public cities: any[];
  
  public selectedDistricts: any[];
  public selectedCities: any[];
  
  public sState: any;
  public sDistrict: any;
  
  appName = 'Dropdown App';

  constructor(public navController: NavController) { 
    this.initializeState();
    this.initializeDistrict();
    this.initializeCity();
  }
  
  initializeState(){
  this.states = [
    {id: 1, name: 'PieChart'},
    {id: 2, name: 'Line Chart'},
    {id: 3, name: 'Table'}
  ];
}


initializeDistrict(){
  this.districts = [
    {id: 1, name: 'Last 7 Days', state_id: 1, state_name: 'PieChart'},
    {id: 2, name: 'Last 1 Month', state_id: 1, state_name: 'PieChart'},
    {id: 3, name: 'Last 12 Months', state_id: 1, state_name: 'PieChart'},
    {id: 4, name: 'Custom Date', state_id: 1, state_name: 'PieChart'},

     {id: 5, name: 'Last 7 Days', state_id: 2, state_name: 'Line Chart'},
    {id: 6, name: 'Last 1 Month', state_id: 2, state_name: 'Line Chart'},
    {id: 7, name: 'Last 12 Months', state_id: 2, state_name: 'Line Chart'},
    {id: 8, name: 'Custom Date', state_id: 2, state_name: 'Line Chart'},


     {id: 9, name: 'Last 7 Days', state_id: 3, state_name: 'Table'},
    {id:10, name: 'Last 1 Month', state_id: 3, state_name: 'Table'},
    {id: 11, name: 'Last 12 Months', state_id:3, state_name: 'Table'},
    {id: 12, name: 'Custom Date', state_id: 3, state_name: 'Table'}
    
  ];
}


public openModal() {
      this.navController.push(ChartPage);
    }

    initializeCity(){
  this.cities = [
    
  ];
}

 setDistrictValues(sState) {
     this.selectedDistricts = this.districts.filter(district => district.state_id == sState.id)
 }

 setCityValues(sDistrict) {
      this.selectedCities = this.cities.filter(city => city.district_id == sDistrict.id);
 }

}

This is my home.html code

<ion-header>
  <ion-navbar>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-item>
     <ion-label>Select Chart Type</ion-label>
     <ion-select (ionChange)="setDistrictValues(sState)" [(ngModel)]="sState">
          <ion-option [value]="sState" *ngFor = "let sState of states">{{sState.name}}  </ion-option> 
    </ion-select>
          
 </ion-item>
<ion-item *ngIf="selectedDistricts">
      <ion-label>Duration</ion-label>
      <ion-select (ionChange)="setCityValues(sDistrict)" [(ngModel)]="sDistrict">
            <ion-option [value]="sDistrict" *ngFor = "let sDistrict of selectedDistricts">{{sDistrict.name}}</ion-option>
      </ion-select>
 </ion-item>



<button ion-button block (click)="openModal()">Block Button</button>
</ion-content>

Then I want pass that dates to my providers

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EarthquakesProvider {

  constructor(public http: Http) {
    console.log('Hello EarthquakesProvider Provider');
  }

   loadEarthquakesprovider() {
        return this.http.get(`http://factoryunlock.in/sundar/public/api/v1/production`)
            .map(res => res.json());
    }

}
2

Check out moment.js - it’s amazing.

3

Or date-fns

shorten pros:

date-fns is way lighter
moment-js has a calendar view (“tomorrow at…”) but is heavier

also compare the internalization in case you use another language than english

1 Like