如何根據項目計算日期顯示在Ionic2中的下拉列表中

Question

我是Ionic 2中的新手。我想根據下拉列表中顯示的項目計算日期。

我在我的頁面兩個下拉：

1. 第一個下拉列表

第二個下拉

我想，在最後7天選擇並點擊** Block Button **後7天日期將從當前日期計算，與過去1個月和最近12個月相同，並將這些日期傳遞給我URL顯示在數據扇形圖和條形圖

這是我home.ts代碼

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { ChartPage } from '../chart/chart'; 
import moment from 'moment'; 
var s,p; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
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); 
} 

} 

這是我home.html的

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

這是我的供應商

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

@Injectable() 
export class EarthquakesProvider { 
    firstName: string; 
    lastName: string; 

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

} 

我想在我的供應商來創建此類型的URL

http://factoryunlock.in/sundar/public/api/v1/production?from=01/02/2017&to=01/05/2017

Answer 1

嗨，你可以嘗試這樣的事情

var days = 7; 
var date = new Date(); 

//todays datetime to milliseconds 
var today = date.getTime(); 

//get 7 days in milliseconds 

var daysinmilli = (days * 24 * 60 * 60 * 1000); 

//make a new date for the 7th day 
var res = date.setTime(today + daysinmilli); 

date = new Date(res); 


// pass your dates to the function below and get your date strings 

function convertDate(date) { 
    var yyyy = date.getFullYear().toString(); 
    var mm = (date.getMonth()+1).toString(); 
    var dd = date.getDate().toString(); 

    var mmChars = mm.split(''); 
    var ddChars = dd.split(''); 

    return (ddChars[1]?dd:"0"+ddChars[0]) + '/' + (mmChars[1]?mm:"0"+mmChars[0]) + '/' + yyyy; 
} 

Answer 2

您可以簡單地使用setDate()和setMonth()功能：

let date = new Date() //current date 
date.setDate(date.getDate()+7);//After 7 days 
date.setMonth(date.getMonth()+3);//After 3 months 

查看更多有關Date object