Как установить значение по умолчанию для инструмента выбора даты в Angular

Question

В настоящее время у меня есть Angular 7 Project с .Net core 2.0 и для стилизации, если в проекте я использую компоненты 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

Здесь вам нужно привязать дату по умолчанию к 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

Answer 2

Это самое простое решение, может, это поможет вам найти здесь ссылку на стек стека

, если вы хотите использовать рективные формы, вам нужно добавить ReactiveFormsModule в родительский модуль.

вам также нужно объявить fromGroup в HTML-шаблоне и назначить значение элементу управления изначально, как показано в приведенном выше решении.

Answer 3

Используйте [formControl] и привяжите его к вашему formControl, созданному в вашем 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> 

Таким образом, в вашем компоненте 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 форматов вы используетепоскольку он не будет анализировать любой формат, даже если это правильная дата, по умолчанию используется угловое значение:

ММ / ДД / ГГГГ

Подробнее об официальной документации вы можете прочитать здесь: https://clarity.design/documentation/datepicker#examples