【问题标题】:DateTimePicker not showing valuesDateTimePicker 不显示值
【发布时间】:2020-10-02 09:45:52
【问题描述】:

我正在使用角度日期选择器 (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;
      }

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

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

【问题讨论】:

    标签: javascript angular datetimepicker angular-ngmodel


    【解决方案1】:

    好吧,我设法通过添加表格和我想要的日期来“解决”这个问题,但是我认为这是一个“快速修复”,并没有真正回答为什么 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
          ])),
        });
      }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-06-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-11
      • 1970-01-01
      • 1970-01-01
      • 2012-05-01
      相关资源
      最近更新 更多