Question

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

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

（我使用的是角形的反应形式，它也使用验证来检查字段是否不为空且不大于当前日期。）

我的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]调用了验证方法。

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

还请记住，如果日期错误，则日期选择器将根据文档返回空值：

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

只需执行以下操作：

import gzip
import xml.etree.cElementTree as ET
import pandas as pd
from collections import defaultdict

file = 'output_plans.xml.gz'
data = gzip.open(file, 'r')
root = ET.parse(data).getroot()
d = defaultdict(list)

for ent in root.findall('./person./person'):
    for anoda in ent.findall('plan[@selected="yes"]/leg[@mode="pt"]'):
        d['id'].append(ent.get('id'))

ids=pd.DataFrame(d)
ids

或

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

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

4 个答案: