0

我目前有一个带有 .Net core 2.0 的 Angular 7 项目，如果项目我使用 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 不是 Clarity datepicker 的有效属性。验证是在模糊上完成的，但模糊在日期选择器上不起作用所以我使用 [clrDate] 调用验证方法。

4

4 回答 4

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');

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

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

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

月/日/年

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

于 2019-02-07T08:28:23.703 回答
0

在这里，您需要将默认日期绑定到 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>

并defaultDate在 TS 文件中声明

 defaultDate = '06/14/1989';

这是stackblitz的解决方案

于 2019-02-07T08:31:40.517 回答
0

这是最简单的解决方案，可能会帮助您 在此处找到 stackblits 链接

如果你想使用反应形式，那么你必须ReactiveFormsModule在你的父模块中添加。

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

于 2019-02-07T11:25:46.877 回答
0

只需执行以下操作：

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

或者

myDateField = new FormControl(new Date().toLocaleDateString());
于 2020-05-16T14:14:23.260 回答