私は現在、Angular 7 Project with .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がClarity datepickerの有効なプロパティではないというエラーが表示されました。検証はblurで実行されますが、blurは日付ピッカーでは機能しません。 [clrDate]を使用して検証メソッドを呼び出しました。
[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つのフォーマットのどれを使用しているかを必ず確認してください。Angularのデフォルトは次のとおりです。
MM / DD / YYYY
公式ドキュメントで詳細を読むことができます：https：//clarity.design/documentation/datepicker#examples
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加