在此处使用日期格式

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

在此处使用日期格式

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 2

HTML日期选择器的问题与, , ...标签相同：您希望这些标签以某种方式工作，但是由浏览器决定如何使用 >。

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

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

datepicker的优点是它们使用简单的旧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)])

Answer 3

您好@tiphanie如果您想使用jQuery datepicker而不是ngb-datepicker。

您可以使用jQuery datepicker Api参考方法'option'设置MaxDate和MinDate

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

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

Answer 4

您需要为此添加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'" >

Answer 5

maxDate = new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10);

// 由于日期选择器格式转换为子字符串

            <input type="date" id="dateSlot" class="form-control app-inputfield" [min]="maxDate" placeholder="mm/d/year" [(ngModel)]="serviceDate" [ngModelOptions]="{standalone: true}">

Answer 6

我有类似的情况，其中我有fromDt和toDt日期，并且我想动态调整它们的最小值和最大值。例如fromDt的最大值应为toDt的最小值，或者toDt的最小值应为fromDt的最大值

但是使用Angular JS ng-min和ng-max不能正常工作。它只显示所有日期范围。硬编码最大值和最小值按预期工作，但是我想使用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)" >

在HTML日期选择器上动态设置minDate / maxDate

6 个答案:

在此处使用日期格式