typescript 在 html datepicker 上动态设置 minDate/maxDate

Set minDate/maxDate dynamically on html datepicker

提问by tiph

I need to restrict my datepicker so that people who are under 16 cannot select their birthdate on the calendar until the day they turn 16.

我需要限制我的日期选择器，以便 16 岁以下的人在他们年满 16 岁之前无法在日历上选择他们的生日。

I was using Angular datepicker and had no problem to do it with this code in my typescript file:

我正在使用 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 };

Here is my HTML:

这是我的 HTML：

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

The issue I have is with the default html datepicker, and I need to use this datepicker and not ngb-datepicker. All the solution I find use jQuery but I cannot use it with Angular 6.

我遇到的问题是默认的 html datepicker，我需要使用这个 datepicker 而不是 ngb-datepicker。我找到的所有解决方案都使用 jQuery，但我不能将它与 Angular 6 一起使用。

Hope I made myself clear and that you can help me with this !

希望我说清楚了，你能帮我解决这个问题！

Thank you.

谢谢你。

ETA:

预计到达时间：

Here is the solution to my issue: app.component.ts :

这是我的问题的解决方案： 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:

HTML：

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

回答by Akj

Using moment here for date formation

在此处使用时刻进行日期形成

DEMO演示

Reference ----> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

参考----> 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:

HTML：

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

回答by tiph

The issue with the HTML datepicker is the same you have with <b>, <i>, <u> ...tags : you expect those tags to behave in some way, but it's up to the browser to treat them how it likes.

HTML datepicker 的问题与<b>, <i>, <u> ...标签的问题相同：您希望这些标签以某种方式运行，但浏览器如何处理它们取决于它。

This means that <b>bold</b>can be bold on Chrome, but not on IE.

这意味着<b>bold</b>可以在 Chrome 上加粗，但不能在 IE 上加粗。

The same happens with the date input : sometimes your user won't be able to have a calendar to pick from (but still an input).

日期输入也会发生同样的情况：有时您的用户将无法选择日历（但仍然是输入）。

The advantage of datepickers is that they display this calendar with plain old HTML/CSS/JS, leaving you with something that will work across most browsers.

日期选择器的优点是它们用普通的旧 HTML/CSS/JS 显示这个日历，让你可以在大多数浏览器上工作。

If you don't want to use one, suit yourself : but how will you implement validation ?

如果你不想使用一个，适合自己：但是你将如何实现验证？

Instead of locking the dates in the picker, consider using Angular's validation on the control :

不要在选择器中锁定日期，而是考虑在控件上使用 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)])

回答by Dhivakaran Ravi

Hi @tiphanie If you want to use jQuery datepicker instead of ngb-datepicker.

嗨@tiphanie 如果你想使用 jQuery datepicker 而不是 ngb-datepicker。

You can set MaxDate and MinDate using the jQuery datepicker Api reference Method 'option'

您可以使用 jQuery datepicker Api 参考方法“选项”设置 MaxDate 和 MinDate

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

Check my working link :Datepicker jQuery UI in Angular 6

检查我的工作链接：Angular 6 中的 Datepicker jQuery UI

回答by Krishna Rathore

You need to add maxand minattribute for this.

您需要为此添加max和min属性。

Demo on Stackblitz

Stackblitz 上的演示

component.ts

组件.ts

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

component.html

组件.html

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