标签: angular-material-datetimepicker

我要求用户可以在日期选择器中选择多个日期。如何在 Angular Material 日期选择器中实现多个日期选择功能？

我通过dateClass尝试了这个。但是，每次选择日期后，日期选择器都会关闭。

这是我尝试过的

HTML代码：

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

打字稿代码：

dateClass = (d: Date) => {
    const date = d.getDate();

    // Highlight the 1st and 20th day of each month.
    return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ? 'example-custom-date-class' : undefined;
}

我正在使用有角材料制成的日期选择器。我想设置一个默认值，但未显示该值。

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

这是我的.js代码，我想将其设置为默认值

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); 

this.form = this.formBuilder.group({
        dataInicial: [data_inicial],
                   ...

如果我使用日期选择器

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

并设置一个语言环境

  providers: [    
    { provide: LOCALE_ID, useValue: 'it-IT' },
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' }]

如果用户从选择器中选择日期，它会起作用，但如果他在输入框中键入，则日期没有以正确的方式解析。例如：如果用户在框中选择 2018 年 3 月 31 日，则意大利格式为 dd/mm/yyyy，我们会得到“31/03/2018”（没关系）但如果他输入“31/03/2018”，则日期不是验证（但它是一个有效的意大利日期）。如果他输入“03/05/2018”，我们会得到 3 月 5 日而不是 5 月 3 日。是角度材料错误还是我犯了一些错误？

我也试过用“it”代替“it-IT”。

我在我的项目中使用角度材料/垫日期选择器，每当用户在其中输入一位数字并失去焦点时，日期选择器就会自动完成随机日期。

例子

只需进入1并离开焦点，或者进入5/5/20

日期选择器自动添加日期

更新：我还使用反应式表单，并使用该方法验证输入

我可以禁用这个吗？

我正在尝试为我的一个项目使用 Angular 6 Material 日期选择器。我需要禁用特定日期或为用户提供选择特定日期的选项（可以是一些随机日期）。

<mat-card>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #pickers></mat-datepicker>
    <app-date-picker></app-date-picker>
  </mat-card>
``

如何在Angular Material Datepicker中显示最小和最大日期验证错误的验证消息

<input [min]="minDate" [max]="maxDate" matInput [matDatepicker]="picker" [formControlName]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

<mat-error class="error-message" *ngIf="formgroup.get('date').hasError('required') && (formgroup.get('date').dirty || formgroup.get('date').touched)">Date is Required</mat-error>

此处已设置必需的验证。

同样，如果用户键入的日期小于minDate，我想显示日期应高于01/01/2019消息。

我知道，如果我们设置minDate，则所有以前的日期都将被禁用。但是在此应用程序中，我们也允许用户键入日期！因此，当用户输入的日期早于定义的minDate时，我想显示错误消息！

有办法实现吗？

如何在 Angular 中创建一个月份日期选择器，不包括隐藏日期和年份？

此以下链接将执行月份和年份选择器。我试图操纵它只做 Month Only。如何配置？

闪电战：

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

结果应该是这样的，发出的值可以是例如 May：a) 5 或 b) 2020 年 5 月 1 日。我可以删除 Day 和 year later 。

资源：Angular Material DatePicker：月和日，不包括年