1
votes

J'utilise ionic3 et angular4 dans l'application mobile, j'ai un problème avec ion-datetime mon exigence est d'afficher la date actuelle et future 15 jours seulement

Ceci est ma page HTML où j'ai utilisé le ion-datetime

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

Ceci est ma page ts

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

Capture d'écran

voici ma façon d'afficher actuellement le sélecteur de date à l'écran

ionic3

1 commentaires

aidez-moi à résoudre ce problème

3 Réponses :

0
votes

vous devez utiliser le plugin moment.js pour donner maxDate pour cela, vous devez installer

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

        }

    }

puis l'importer dans votre fichier ts

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

puis implémentez ce code

Page HTML:

import * as moment from 'moment';

Page TS:

npm i moment

0 commentaires

0
votes

'max' est également un paramètre intégré dans la directive ion-datetime afin que vous puissiez facilement définir la valeur limite maximale.

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

Dans votre fichier .ts

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

J'espère que le code ci-dessus vous aidera à y parvenir

0 commentaires

0
votes

this.min30days = this.datePipe.transform (nouvelle date (Date.now () - 30 * 86400000), "aaaa-MM-jj");

0 commentaires