Question

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

<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],
                   ...

Answer 1

您需要为startAt更改提供一个Date对象，如下所示：

在.ts中：

date = new Date((new Date().getTime() - 3888000000));

在html中：

<mat-datepicker  [startAt]="date" #picker></mat-datepicker>

这里的工作演示：https://stackblitz.com/edit/angular-n9yojx

Answer 2

在一组表单控制器中，您可以使用默认日期，如下所示。

 birthdayCtrl: ['1999-01-31']

Answer 3

下面是Angular 10，Angular Material 10和Reactive表单的工作代码

component.ts

      this.youForm= this._formBuilder.group({


        StartDate: [new Date(), Validators.required],

      });

component.html不变

  <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="StartDate" placeholder="Start date *" 
              formControlName="StartDate">
            <mat-label>Start Date *</mat-label>
            <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
            <mat-datepicker #StartDate></mat-datepicker>
          </mat-form-field>

Answer 4

这对我有用！

HTML-

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker  #picker1></mat-datepicker>
</mat-form-field>

TS-

date1 = new FormControl(new Date())

Answer 5

ngModel对我有用...

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

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

Answer 6

您可以在输入中使用定义的formControl。

这是html

#include<iostream>

using static_typeinfo = void (*)(void) ;

template<typename T>
void static_typeid_helper()
{
}

template< typename T >
constexpr static_typeinfo static_typeid(const T&)
{
    return &static_typeid_helper<T>;
}

template< typename T >
constexpr static_typeinfo static_typeid()
{
    return &static_typeid_helper<T>;
}

int main()
{
    constexpr static_typeinfo int_id = static_typeid(13);   
    constexpr static_typeinfo uint_id = static_typeid(1U);
    constexpr static_typeinfo int_id2 = static_typeid<int>();
    constexpr static_typeinfo uint_id2 = static_typeid(3U);

    constexpr bool ok1 = (uint_id2 == uint_id);  // ok
    constexpr bool ok2 = (int_id == int_id2);    // ok  

    std::cout << std::boolalpha << ok1 << ok2;  

    // Why the following statement fails to complile in gcc 8.3.0 even though it 
    // it works in clang 8.0.0 ? Error Message:
    //  error: ‘(static_typeid_helper<int> == static_typeid_helper<unsigned int>)’ 
    //  is not a constant expression

    constexpr bool ok3 = (int_id != uint_id);  
    std::cout << ok3 << std::endl;

    return 0;
}

这是TS 声明您为formControl

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

Answer 7

在您的.html ----

中

     <mat-form-field style="width:150px;"  color="accent">
            <mat-label>Choose From Date</mat-label>
            <input  class="example-events" matInput [matDatepicker]="picker1"  [ngModel]="dateF" >
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1 ></mat-datepicker>
     </mat-form-field>

在您的.ts ----

dateF:any=new Date();

Answer 8

使用模板驱动的方法，解决方案如下。

 selectedDate = new Date();

<input class="form-control"
                     matInput
                     [matDatepicker]="dp3"
                     [min]="today"
                     [max]="max"
                     disabled
                     [(ngModel)]="selectedDate"
                     (ngModelChange)="dateUpdated()"
                     name="currentDate"
                   />
                   <mat-datepicker-toggle
                     matSuffix
                     [for]="dp3"
                   ></mat-datepicker-toggle>
                   <mat-datepicker #dp3 disabled="false"></mat-datepicker> ```

Answer 9

这是我的答案，

.html

中

loading

.ts

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

这会将当前日期设置为默认日期。

为角度材料datePicker设置默认值，角度为5

9 个答案: