Question

我有两个日期选择器：开始日期和结束日期。我想检查选择了哪些日期，以便拒绝用户选择大于结束日期的开始日期和小于开始日期的结束日期。

<mat-form-field class="my-datepicker">
    <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today" [formControl]="startDate">
    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
    <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field class="my-datepicker">
    <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today"  [formControl]="endDate">
    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
    <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

如何以编程方式设置日期以获得此结果？

Answer 1

试试这个，对我工作 HTML代码：

import 'hammerjs';
import * as moment from 'moment';
  onSetDatepicker(date) {
    if (date.select) {
      $('#birthDate').pickadate().pickadate('picker').close();
    }
  }

和ts代码：

'The '==' operator can not be applied to the 'string' and 'number' types'

Answer 2

检查出来：https://material.angular.io/components/datepicker/overview#setting-the-calendar-starting-view

如果您将结束日期存储为 endDate ，那么例如：

<mat-datepicker ... [startAt]="endDate"></mat-datepicker>

或者作为 Datepicker with min＆amp;最高验证示例：https://material.angular.io/components/datepicker/examples

<input matInput [min]="endDate" ... >

甚至更一般，使用上面链接中的 Datepicker和过滤器验证示例。

有关如何使用 min / max 和过滤器的更多信息：https://material.angular.io/components/datepicker/overview#date-validation

Answer 3

您需要稍微修改一下代码。在HTML中：

<mat-form-field >
  <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today<endDate|| endDate == undefined?today:endDate"  [(ngModel)]="startDate" >
  <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
  <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field >
  <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today" [min]="startDate"   [(ngModel)]="endDate"  >
  <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
  <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

在TS文件中：

today = new Date();
 ngOnInit() {
    this.today = JSON.parse(JSON.stringify(this.today)).substring(0, 10);
}

Answer 4

这是一个工作示例，如果您使用的是响应式表单，则我使用了最小和最大功能，因为另一个答案缺少响应式表单的实际解决方案，因此我将其发布以帮助需要的人。

组件：

 export class AnnouncementformComponent implements OnInit {
   constructor(private _formBuilder: FormBuilder){}

   Announcementform: FormGroup;
   minDate:Date;

  this.Announcementform = this._formBuilder.group({

  PublishedFrom: ['', Validators.required],
  PublishedTo: ['', Validators.required],

 });
 this.Announcementform.valueChanges.subscribe(res=>{
        this.minDate = new Date(res.PublishedFrom);
  });

component.html

               <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
                        formControlName="PublishedFrom">
                        <mat-label>Publish FROM *</mat-label>
                    <mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
                    <mat-datepicker #PublishedFrom></mat-datepicker>
                </mat-form-field>
                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
                        formControlName="PublishedTo" [min]="minDate">
                        <mat-label>Publish TO *</mat-label>
                    <mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
                    <mat-datepicker #PublishedTo></mat-datepicker>
                </mat-form-field>

Angular 5 - 热门以编程方式更改datepicker日期

4 个答案: