Question

当前，我正在使用p日历记录时间的同时正在处理p日历，这可以让用户选择时间。我目前在分配时间上遇到问题，例如，我需要设置一个默认的时间，该时间不会使用formControlName发生。

HTML：

<p-calendar id="calenderid" showTime="true" [timeOnly]="true" placeholder="{{'Select' | translate}}"></p-calendar>

当我使用

HTML：

<p-calendar [showIcon]="true" [name]="calendar" placeholder="Date" dateFormat="dd/mm/yy" [formControlName]="calendarPick"></p-calendar>

我可以通过表单控件设置日期值，但是当我将其与时间HTML一起使用时，我将无法设置时间。

Answer 1

在不知道组件内容和完整HTML模板的情况下很难分辨代码中发生了什么。

考虑到您使用的是最新的Angular / PrimeNG，设置时间可以按p-calendar的预期进行。

例如，下面的表单包含一个p-calendar表单控件：

<form [formGroup]="form" class="p-3 bg-faded">
  <div class="form-group row">
    <label class="col-sm-3 col-form-label"><strong>Calendar</strong></label>
    <div class="col-sm-9">
     <p-calendar formControlName="date"  showTime="true"></p-calendar>
    </div>
  </div>
</form>

<button (click)="setTime()">Set time to now</button>

<pre>{{ this.form.get("date").value | json }}</pre>

具有以下组成部分：

form: FormGroup;
constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.form = this.fb.group({
    date: [new Date()]
  });
}

setTime() {
  this.form.patchValue({
    date: new Date()
  });
}

单击按钮将通过修补表单控件值将日历时间设置为当前时间。

Answer 2

修补<p-calender>的值的最佳方法是：

const date = new Date(event),
          mnth = ('0' + (date.getMonth() + 1)).slice(-2),
          day = ('0' + date.getDate()).slice(-2);
      const frmdate = [day, mnth, date.getFullYear()].join('/');

然后将值修补到窗体控件。这对我有用。

P日历无法通过formControlName修补时间值

2 个答案: