Установить minDate / maxDate динамически на html datepicker
Мне нужно ограничить выбор даты, чтобы люди младше 16 лет не могли выбрать дату своего рождения в календаре до того дня, когда им исполнится 16 лет.
Я использовал Angular datepicker, и у меня не было проблем с этим кодом в моем файле машинописного текста:
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 };
Вот мой HTML:
<input class = "form-control" [required] = "mngVis.birthdate.isrequired"
type = "date" maxDate = "maxDate" minDate = "minDate"
jhiTranslate = "form.birthdate.placeholder"
ngModel name = "birthdate" #birthdate = "ngModel">
У меня проблема с html datepicker по умолчанию, и мне нужно использовать этот datepicker, а не ngb-datepicker. Все найденные мной решения используют jQuery, но я не могу использовать его с Angular 6.
Надеюсь, я ясно дал понять, что вы можете мне с этим помочь!
Спасибо.
ETA:
Вот решение моей проблемы: 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.info(this.minDate)
console.info(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">
Ответы 6
Проблема с HTML datepicker такая же, как и с тегами <b>, <i>, <u> ...: вы ожидаете, что эти теги будут вести себя каким-то образом, но это до браузера, чтобы относиться к ним так, как ему нравится.
Это означает, что <b>bold</b> может быть выделен жирным шрифтом в Chrome, но не в IE.
То же самое происходит с вводом даты: иногда у вашего пользователя не будет календаря для выбора (но все же ввода).
Преимущество datepickers заключается в том, что они отображают этот календарь с помощью простого старого HTML / CSS / JS, оставляя вам то, что будет работать в большинстве браузеров.
Если вы не хотите его использовать, устраивайте себя: но как вы реализуете валидацию?
Вместо блокировки дат в сборщике рассмотрите возможность использования проверки Angular для элемента управления:
<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)])
@tiphanie делайте то, что должны, но не забудьте в любом случае использовать проверку Angular, чтобы убедиться, что ваши данные действительны!
Использование момента здесь для формирования даты
ДЕМОСсылка ----> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/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">
Это не работает в браузере Safari. Что можно попробовать?
Привет, @tiphanie. Если вы хотите использовать jQuery datepicker вместо ngb-datepicker.
Вы можете установить MaxDate и MinDate, используя опцию jQuery datepicker Api reference Method 'option'
.datepicker( 'option', 'minDate', new Date(2018, 1 - 1, 4))
.datepicker('option','maxDate', new Date(2018, 1 - 1, 24))
Проверьте мою рабочую ссылку: Пользовательский интерфейс Datepicker jQuery в Angular 6
@tiphanie для дальнейшей ссылки Api для выбора даты проверьте ссылку api.jqueryui.com/datepicker
Для этого вам нужно добавить атрибуты max и min.
Демо на Stackblitz
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'" >
У меня аналогичная ситуация, когда у меня есть даты fromDt и toDt, и я хочу динамически настраивать их min и max. например max fromDt должен быть min toDt или min toDt должен быть max fromDt
Однако это не работает с использованием Angular JS ng-min и ng-max. Он просто показывает весь диапазон дат. Жесткое кодирование max и min работает должным образом, но я хочу использовать ng-min / min / ng-max / max для динамической настройки. Любые отзывы экспертов были бы очень полезны
<input type = "month" ng-model = "fromDt" id = "fromDt" ng-min = "2015-01" ng-max = "{{toDt}}" ng-change = "fetch(fromDt, toDt)">
<input type = "month" ng-model = "toDt" id = "toDt" ng-min = "{{fromDt}}" ng-change = "fetch(fromDt, toDt)" >
maxDate = new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10);
// конвертируем в подстроку, потому что формат datepicker
<input type = "date" id = "dateSlot" class = "form-control app-inputfield" [min] = "maxDate" placeholder = "mm/d/year" [(ngModel)] = "serviceDate" [ngModelOptions] = "{standalone: true}">
Спасибо, это то, что я сделал изначально, но мне действительно нужно заблокировать дату в сборщике.