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">
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
4 odpowiedzi
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
HTML:
Anonimowy użytkownik
Potwierdzenie od:
przeglądarka powinna traktować je tak, jak lubi
.
Oznacza to, żemoż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:
<pre class="lang-js prettyprint-override">
birthdate = new FormControl('', [Validators.max(this.birthdate), Validators.min(minDate)])Anonimowy użytkownik
Potwierdzenie od:
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
Potwierdzenie od:
Demo włączone
Stackblitz
https://stackblitz.com/edit/se ... .html component.ts
component.html