ngx-bootstrap日期选择器验证无效日期

Question

ngx-bootstrap日期选择器验证无效日期

3

当输入无效日期时，我希望保存或保留输入的值，以便向用户显示。我该如何做？

背景：我正在使用ngx-bootstrap v5.1.0日期选择器和angular 7.2.15。当输入的日期无效（例如：使用MM / DD / YYYY的09/99/2020），在我离开输入字段时，它会自动将字符串“无效日期”放入输入框中。

这种技术可以工作，但另外，我想给用户一些关于他们输入的日期的反馈。具体来说，输入的值是无效的。在这种情况下，它将是09/99/2020。

我可以触发无效日期验证，但我无法获取最初输入的日期值，以便用户知道他们输入了什么以及为什么无效。

我该如何获取或保留输入字段中的原始值？我尝试使用onChange事件和valueChanges，但ngx-datepicker似乎会覆盖它们，直到你离开该字段才会触发。

- Sandy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Z. Bagley · Accepted Answer

ngx-bootstrap-datepicker有一个自定义的输出事件bsValueChange

将该输出添加到您的HTML input元素中：

  <input type="text"
        class="form-control"
        [minDate]="minDate"
        [maxDate]="maxDate"
        #dp="bsDatepicker"
        (bsValueChange)="onDateChange($event)"
        bsDatepicker [(bsValue)]="myDateValue">

然后在您的组件ts文件中处理此内容：

 myDateValue: Date;
  previousDate: Date;

  ngOnInit() {
    this.myDateValue = new Date();
  }

  onDateChange(newDate: Date) {
    this.previousDate = new Date(newDate);

示例Stackblitz：https://stackblitz.com/edit/ngx-bootstrap-datepicker-taconz

该示例展示了如何使用ngx-bootstrap日期选择器。您可以在此处查看和编辑代码。