如何在 Angular 中为 Clarity Datepicker 设置默认值

Question

我目前有一个 Angular 7 Project wit .Net core 2.0，如果我使用 Clarity 组件，则用于样式设置。

有人知道如何为清晰度日期选择器设置默认值吗？

（我在 angular 中使用反应式表单，它还使用验证来检查字段是否为空且不大于当前日期。）

我的 HTML 长什么样：

<clr-date-container>
    <label>Service Date</label>
    <input type="date" clrDate formControlName="fromDateField" 
      [clrDate]="ValidateFromDateField()" />
    <clr-control-error>{{this.errorMsgFromdate}}</clr-control-error>
  </clr-date-container>

我的组件是什么样的

 ValidateFromDateField() {
    if ((this.claimDetailService.DefaultDate === "") || (this.claimDetailService.DefaultDate === undefined)
      || (this.claimDetailService.DefaultDate === null)) {
     this.claimDetailService.DefaultDate = this.claimDetailform.get('fromDateField').value;
    } 
    console.log('Defualt date ', this.claimDetailService.DefaultDate);
    this.claimDetailService.currentClaimDetail.FROMDATE = new Date(this.claimDetailform.get('fromDateField').value).toDateString();
    this.claimDetailService.currentClaimDetail.TODATE = new Date(this.claimDetailform.get('fromDateField').value).toDateString();
    this.errorMsgFromdate = this.FieldValidation(this.claimDetailService.currentClaimDetail.FROMDATE, 'fromDateField');
    if (this.errorMsgFromdate === 'valid') {
      this.errorMsgFromdate = ' ';
      this.PopulateFromDateErr();
    }
    if (this.errorMsgFromdate !== '') {
      this.claimDetailform.get('fromDateField').setErrors(this.errorMsgFromdate);
    }
    this.claimDetailService.DefaultDate = this.claimDetailform.get('fromDateField').value;
  }

我确实尝试过使用 setValue() 方法，但它在控制台中给了我一个错误，说 setValue 不是有效的属性清晰度 datepicker.And 验证是在模糊但模糊的情况下完成的不适用于日期选择器，所以我使用 [clrDate] 来调用验证方法。

Answer 1

使用 [formControl] 并将其绑定到您在 component.ts

中创建的 formControl

  <clr-date-container>
   <label>Service Date</label>
   <input type="date" clrDate 
      [formControl]="myDateField" 
      id="date" name="date"
      [(ngModel)]="date"
      [clrDate]="ValidateFromDateField()" />
   <clr-control-error>{{this.errorMsgFromdate}}</clr-control-error>
</clr-date-container>

所以在你的 ts 组件中创建 formControl

myDateField = new FormControl('');

并将值修补为：

  this.myDateField.patchValue('02/02/2019');

另请记住，如果日期错误，根据文档，日期选择器将 return 为 null：

Date picker emits null when an invalid date is entered after a valid date was set.

因此请务必检查您使用的是 3 种格式中的哪一种，因为即使日期正确，它也不会为您解析任何格式，angular 的默认值是：

MM/DD/YYYY

您可以在官方文档中阅读更多内容：https://clarity.design/documentation/datepicker#examples

Answer 2

这里你需要像下面那样将默认日期绑定到 ngModel

 <form class="compact">
        <section class="form-block">
          <div class="form-group">
            <label for="date">Date:</label>
            <input type="date" id="date" [(ngModel)]="defaultDate" [ngModelOptions]="{standalone: true}" clrDate>
          </div>
        </section>
      </form>

并在TS文件中声明defaultDate

 defaultDate = '06/14/1989';

Here is solution on stackblitz

Answer 3

这是最简单的解决方案，希望对您有所帮助 find the stackblits link here

如果您想使用反述形式，则必须在您的父模块中添加 ReactiveFormsModule。

您还需要在 html 模板中声明一个 fromGroup 并最初为控件分配值，如上面的解决方案所示。

Answer 4

简单的你可以如下操作：

 this.myForm = formBuildr.group({
  myDateControl: [new Date().toLocaleDateString()]});

或者

myDateField = new FormControl(new Date().toLocaleDateString());

如何在 Angular 中为 Clarity Datepicker 设置默认值

How to set a defualt value for a Clarity Datepicker in Angular

angular

.net-core

clarity