Я использую ionic3 и angular4 в мобильном приложении, у меня проблема с ion-datetime, мое требование - показывать только текущую дату и будущие 15 дней

Question

Это моя HTML-страница, где я использовал ion-datetime

        <ion-item>
            <ion-label floating>Date of Admission</ion-label>
            <ion-datetime id="txtDOA" name="txtDOA" displayFormat="MM/DD/YYYY" [min]="todayDate" [max]="maxDate" [(ngModel)]="CashLessRequest.DOA"></ion-datetime>
        </ion-item>

Это моя страничка

ngOnInit() {
    this.todayDate = this.datePipe.transform(new Date(), "yyyy-MM-dd");
    this.CashLessRequest.DOA = this.datePipe.transform(new Date(), "yyyy-MM-dd");
}

Скриншот

Answer 1

'max' также является встроенным параметром в директиве ion-datetime, поэтому вы можете легко установить максимальное предельное значение.

<ion-datetime displayFormat="MMMM YYYY" min="today" max="dateLimit" [(ngModel)]="myDate">
</ion-datetime>

В вашем файле .ts

date: Date;
today : Date;
dateLimit : Date
//set min value using current date
this.today = new Date().toJSON().split('T')[0];

//set max date limit 
this.date = new Date();
this.date.setDate( this.date.getDate() + 15 );
this.dateLimit = this.date.toJSON().split('T')[0];

Я надеюсь, что приведенный выше код поможет достичь этого

Answer 2

this.min30days = this.datePipe.transform (new Date (Date.now () - 30 * 86400000), "гггг-ММ-дд");

Answer 3

вы должны использовать плагин moment.js, чтобы получить maxDate для которого вам нужно установить

npm i moment

и затем импортируйте его в файл TS

import * as moment from 'moment';

и затем реализовать этот код

HTML-страница:

<ion-item>
    <ion-label floating>Date of Admission</ion-label>
    <ion-datetime displayFormat="MM/DD/YYYY" [min]="todayDate" [max]="maxDate" [(ngModel)]="date"></ion-datetime>
</ion-item>

Страница TS:

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import * as moment from 'moment';

    @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
    })


    export class HomePage {

        public date=moment().format();
        public todayDate=moment().format();
        public maxDate= moment().add(15,'d').format();

        constructor(public navCtrl: NavController) {

        }

    }