Установите minDate / maxDate динамически на html datepicker

Question

Мне нужно ограничить свой указатель даты, чтобы люди моложе 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.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">

Answer 1

Для этого вам необходимо добавить атрибут max и min.

Демонстрация на Stackblitz

.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'" >

Answer 2

Использование момента здесь для формирования даты

DEMO

Ссылка ----> 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">

Answer 3

Hi @tiphanie Если вы хотите использовать jQuery datepicker вместо ngb-datepicker.

Вы можете установить MaxDate и MinDate, используя jQuery datepicker. Справочный метод Api 'option'

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

Проверьте мою рабочую ссылку: Пользовательский интерфейс jQuery Datepicker в Angular 6

Answer 4

Проблема с датщиком HTML-кодов та же, что и у вас с тегами <b>, <i>, <u> ...: вы ожидаете, что эти теги будут вести себя как-то, но браузер будет обращаться с ними так, как ему нравится .

Это означает, что <b>bold</b> может быть выделен жирным шрифтом в Chrome, но не в IE.

То же самое происходит с вводом даты: иногда ваш пользователь не может иметь календарь для выбора (но все же ввод).

Преимущество средств выбора даты состоит в том, что они отображают этот календарь с простым старым HTML / CSS / JS, что дает вам возможность работать с большинством браузеров.

Если вы не хотите использовать один, подойдет себе: но как вы будете осуществлять проверку?

Вместо того, чтобы блокировать даты в сборщике, рассмотрите возможность использования Angular'sпроверка на контроле:

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