安装 minDate/maxDate 动态地 html datepicker

我需要限制我的 datepicker, 所以没有人 16 多年来,不能选择日历中出生的日期,直到他们转身的那一天 16.

我用了 Angular datepicker 在我的文件中使用此代码执行此操作没有问题。 typescript:


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 #birthdate="ngModel" [required]="mngVis.birthdate.isrequired" class="form-control" jhitranslate="form.birthdate.placeholder" maxdate="maxDate" mindate="minDate" name="birthdate" ngmodel="" type="date"/>


我有默认问题 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 #birthdate="ngModel" [max]="maxDate" [min]="minDate" [required]="mngVis.birthdate.isrequired" class="form-control" jhitranslate="form.birthdate.placeholder" name="birthdate" ngmodel="" type="date"/>
已邀请:

龙天

赞同来自:

使用此刻来形成日期

https://stackblitz.com/edit/an ... ation
关联 ---->
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 [max]="maxDate" [min]="minDate" class="form-control" type="date"/>

石油百科

赞同来自:

标签的问题 HTML datepicker 与标记相同
<b>, <i>, <u> ...

: 您希望这些标签以某种方式表现,但

浏览器应该像他喜欢的那样对待它们

.

代表着
<b>bold</b>

可能是大胆的 Chrome, 但不是 IE.

同样的事情发生在日期的日期。 : 有时您的用户将无法选择日历 /但仍然输入/.

优势 datepickers 在于他们用简单的旧显示这个日历 HTML/CSS/JS, 让你在大多数浏览器中使用的东西。

如果您不想使用它,请安排自己 : 但

您将如何实施验证 ?

考虑使用验证,而不是阻止收集器中的日期。 Angular 在控制元件中 :


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



birthdate = new FormControl/'', [Validators.max/this.birthdate/, Validators.min/minDate/]/


</u></i></b>

窦买办

赞同来自:

你好 @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//


查看我的工作链接:
https://stackblitz.com/edit/an ... nt.ts

龙天

赞同来自:

为此,您需要添加属性
max


min

.

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


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


component.html


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

要回复问题请先登录注册