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

Question

I currently have a Angular 7 Project wit .Net core 2.0 and for styling if the project i use Clarity components.

Does Anyone know how to set a default value for a clarity date-picker?

(I'm using reactive forms in angular which also uses validations that checks if the field is not empty and not bigger than the current date.)

What My HTML looks like:

<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>

What My Component Looks Like

 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;
  }

i did try using the setValue() method but it gave me an error in the console saying that setValue is not a valid property of Clarity datepicker.And the validation is done on blur but blur doesn't work on a date-picker so i used [clrDate] to call the validation method.

Answer 1

Use [formControl] and bind it to your formControl created in your component.ts

  <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> 

So in your ts component create the formControl

myDateField = new FormControl('');

And patch the value with:

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

Also remember that if the date is wrong, date picker will return a null according to documentation:

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

So be sure to check which of 3 format are your using because it will not parse for you any format even if is a correct date, the default of angular is:

MM/DD/YYYY

You can readme more on the Official Documentation: https://clarity.design/documentation/datepicker#examples