Ustaw minDate/maxDate dynamicznie na html datepicker


Muszę ograniczyć wybór daty, aby osoby poniżej 16 roku życia nie mogły wybierać daty urodzenia w kalendarzu do dnia, w którym ukończą 16 lat.
Użyłem Angular Datepicker i nie miałem problemu z zrobieniem tego z tym kodem w moim pliku maszynopisu:
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 };

Oto mój kod HTML:
<input class="form-control" [required]="mngVis.birthdate.isrequired" 
type="date" maxDate="maxDate" minDate="minDate"
jhiTranslate="form.birthdate.placeholder"
ngModel name="birthdate" #birthdate="ngModel">

Mam problem z domyślnym datownikiem html i muszę użyć tego datepickera, a nie ngb-datepicker. Wszystkie znalezione przeze mnie rozwiązania używają jQuery, ale nie mogę go używać z Angular 6.
Mam nadzieję, że wyraziłem się jasno i że możesz mi w tym pomóc!
Podziękować.
ETA:
Oto rozwiązanie mojego problemu:
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">

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Wykorzystanie chwili tutaj do stworzenia daty
> DEMO
https://stackblitz.com/edit/an ... ation
Link ---- & >

https://developer.mozilla.org/ ... /date
https://developer.mozilla.org/ ... /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">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Problem z tagami HTML datepicker jest taki sam, jak w przypadku tagów
& < b & >, & < i & >, & < u & > ...
: spodziewasz się, że te tagi będą się w jakiś sposób zachowywać, ale

przeglądarka powinna traktować je tak, jak lubi

.
Oznacza to, że
& < b & > pogrubiony & </b & >
może być pogrubiony w przeglądarce Chrome, ale nie w przeglądarce IE.
To samo dzieje się z wprowadzaniem daty: czasami użytkownik nie może wybrać kalendarza (ale nadal wprowadza dane).
Zaletą datepickerów jest to, że wyświetlają ten kalendarz ze zwykłym starym HTML/CSS/JS, pozostawiając coś, co będzie działać w większości przeglądarek.
Jeśli nie chcesz go używać, zadbaj o siebie: ale

jak zaimplementujesz walidację?

Zamiast blokować daty w selektorze, rozważ użycie walidacji kątowej w kontrolce:
<input class="form-control" type="date" max="maxDate" min="minDate" name="birthdate" 
[required]="mngVis.birthdate.isrequired"
jhiTranslate="form.birthdate.placeholder"
[formControl]="birthdate">

<pre class="lang-js prettyprint-override">
birthdate = new FormControl('', [Validators.max(this.birthdate), Validators.min(minDate)])
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Cześć @tiphanie, jeśli chcesz użyć jQuery datepicker zamiast ngb-datepicker.
Możesz ustawić MaxDate i MinDate za pomocą metody referencyjnej jQuery datepicker Api „option”
.datepicker( 'option', 'minDate', new Date(2018, 1 - 1, 4)).datepicker('option','maxDate', new Date(2018, 1 - 1, 24))

Sprawdź mój działający link:

Interfejs Datepicker jQuery w Angular 6
https://stackblitz.com/edit/an ... nt.ts
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Aby to zrobić, musisz dodać atrybuty
max
i
min
.
Demo włączone


Stackblitz

https://stackblitz.com/edit/se ... .html component.ts

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

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

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się