时间戳

首页 > 解决方案 > DateTimePicker 不显示值

javascript - DateTimePicker 不显示值

问题描述

我正在使用角度日期选择器（https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker）在组件中选择一系列日期，然后继续发送Instant[]到我的 java 后端并存储它在我的数据库中。

但是，当我尝试从数据库加载数据并显示用户先前在 datepicker 组件中选择的范围时，它不会显示。

这是我的日期选择器的 html 代码

       <div class="input-group form-control-lg" id="validity">
              <input id="validity-date" [owlDateTimeTrigger]="dt13"  [owlDateTime]="dt13"
                     placeholder ="Validity range of the survey"
                     [(ngModel)]="validityDate"
                     [selectMode]="'range'" class="form-control cursor-pointer"/>
              <owl-date-time [pickerMode]="'dialog'" #dt13></owl-date-time>
            </div>

这是我在 .ts 文件中所做的：

 this.surveyOfferRepository.getById(this.companyId, this.surveyId).subscribe(surveyOffer => {      
        this.validityDate = surveyOffer.validityDate;
      }

我确实Instant[]从我的 java 后端得到了，它被视为Date[]在我的 Angular 应用程序中，它只是没有显示在用户的前面，而且我在控制台中看不到任何错误。这是我调试打字稿时得到的结果：

我已经阅读了文档和许多示例，但是我找不到任何我想做的示例，这个组件不能提供我想要的吗？你对我做错了什么有任何想法吗？或者我应该如何进行？

标签： javascriptangulardatetimepickerangular-ngmodel

解决方案

好吧，我设法通过添加表格和我想要的日期来“解决”这个问题，但是我认为这是一个“快速修复”，并没有真正回答为什么 ngModel 适用于单个日期而不适用于一个范围。

  <form [formGroup]="formSurvey" class="container">
                  <input id="validity-date" [owlDateTimeTrigger]="dt1"  [owlDateTime]="dt1"
                         placeholder ="Validity range of the survey"
                         formControlName="dates"
                         [selectMode]="'range'" class="form-control cursor-pointer"/>
                  <owl-date-time [pickerMode]="'dialog'" [showSecondsTimer]="false"  #dt1></owl-date-time>
                </form>

使用表单设置

  private setUpForm() {
    return new FormGroup({
      dates: new FormControl('', Validators.compose([
        Validators.required
      ])),
    });
  }

推荐阅读