web-dev-qa-db-fra.com

Définir dynamiquement minDate/maxDate sur datepicker html

Je dois restreindre mon choix de date afin que les personnes de moins de 16 ans ne puissent pas choisir leur date de naissance sur le calendrier avant le jour de leurs 16 ans.

J'utilisais Angular datepicker et je n'avais aucun problème à le faire avec ce code dans mon fichier TypeScript: 

now = new Date();
year = this.now.getFullYear();
month = this.now.getMonth();
day = this.now.getDay();
minDate = { year: this.year - 100, month: this.month, day: this.day };
maxDate = { year: this.year - 16, month: this.month + 1, day: this.day };

Voici mon HTML:

<input class="form-control" [required]="mngVis.birthdate.isrequired" 
type="date" maxDate="maxDate" minDate="minDate" 
jhiTranslate="form.birthdate.placeholder"
ngModel name="birthdate" #birthdate="ngModel">

Le problème que j'ai est avec le datepicker html par défaut, et je dois utiliser ce datepicker et pas ngb-datepicker. Toute la solution que je trouve utilise jQuery mais je ne peux pas l’utiliser avec Angular 6.

J'espère que j'ai été clair et que vous pouvez m'aider avec ça!

Je vous remercie.

ETA:

Voici la solution à mon problème: App.component.ts:

import { Component } from '@angular/core';
import moment from 'moment'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  now = new Date();
  year = this.now.getFullYear();
  month = this.now.getMonth();
  day = this.now.getDay();
  minDate = moment({year: this.year - 100, month: this.month, day: this.day}).format('YYYY-MM-DD');

  maxDate = moment({year: this.year - 16, month: this.month, day: this.day}).format('YYYY-MM-DD');

  date(ev) {
    console.log(this.minDate)
    console.log(ev.target.value)
  }
}

HTML:

 <input class="form-control" [required]="mngVis.birthdate.isrequired" 
    type="date" [max]="maxDate" [min]="minDate" 
    jhiTranslate="form.birthdate.placeholder"
    ngModel name="birthdate" #birthdate="ngModel">
angulartypescriptdatepicker
2
tiph

Essayez quelque chose comme ça:

D&EACUTE;MO

Référence ----> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

en utilisant moment ici pour la formation de la date. 

 //Taken current date as min date. and random as max date. 
 // Default format of date is as "YYYY-MM-DD" so we need to convert using  moment  

minDate = moment(new Date()).format('YYYY-MM-DD')
maxDate ="2018-09-08"

HTML:

<input class="form-control" type="date" [min]="minDate" [max]="maxDate">
2
AashishJ

Le problème avec le datepicker HTML est identique à celui que vous avez avec les balises <b>, <i>, <u> ...: vous vous attendez à ce que ces balises se comportent d’une manière ou d’une autre, mais il s’agit de il appartient au navigateur de les traiter comme il veut. 

Cela signifie que <b>bold</b> peut être en gras sur Chrome, mais pas sur IE. 

La même chose se produit avec la saisie de la date: parfois, votre utilisateur ne pourra pas choisir d’agenda (mais une saisie). 

L'avantage des datepickers est qu'ils affichent ce calendrier avec du vieux HTML/CSS/JS, ce qui vous laisse quelque chose qui fonctionnera dans la plupart des navigateurs. 

Si vous ne souhaitez pas en utiliser un, faites-le vous-même: mais comment allez-vous implémenter la validation?

Au lieu de verrouiller les dates dans le sélecteur, envisagez d'utiliser la validation d'Angular sur le contrôle: 

<input class="form-control" type="date" max="maxDate" min="minDate" name="birthdate" 
  [required]="mngVis.birthdate.isrequired"
  jhiTranslate="form.birthdate.placeholder" 
  [formControl]="birthdate">

birthdate = new FormControl('', [Validators.max(this.birthdate), Validators.min(minDate)])
1
trichetriche

Vous devez ajouter les attributs max et min pour cela.

Démo surStackblitz

composant.ts

maxDate="2018-08-28";
minDate:'2016-08-28';

composant.html

<input type="date"  [min]="minDate | date:'yyyy-MM-dd'" [max]="maxDate | date:'yyyy-MM-dd'" >
0
Krishna Rathore

Bonjour @tiphanie Si vous souhaitez utiliser jQuery datepicker au lieu de ngb-datepicker.

Vous pouvez définir MaxDate et MinDate à l'aide de la méthode de référence Api de jQuery datepicker 'option'. 

.datepicker( 'option', 'minDate', new Date(2018, 1 - 1, 4))
.datepicker('option','maxDate', new Date(2018, 1 - 1, 24))

Vérifiez mon lien de travail: Datepicker jQuery UI in Angular 6

0
Dhivakaran Ravi