Question

HTML：

<input [(ngModel)]="ngStartDate" type="text">

TS：

在实际应用中，有一个jQuery ui datepicker，用户可以在其中选择日期，选择的格式如下。

start_date: any = 'Wed May 31 2019 05:30:00 GMT+0530 (India Standard Time)'; // Original Format

然后有一个 set 和 get 方法，该方法实际上将给定的字符串转换为日期，

  public set ngStartDate(value: string) {
    this.start_date = new Date(value);
  }

  public get ngStartDate(): string {
    return this.getFormattedDate(this.start_date);
  }

  getFormattedDate(date) {

    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    let year = d.getFullYear();

    if (month.length < 2) {
      month = '0' + month;
    }

    if (day.length < 2) {
      day = '0' + day;
    }

    return [year, month, day].join('-');
  }

截至目前，一切正常。

工作示例： https://stackblitz.com/edit/angular-kt5kkr

由于我的真实应用是使用angularjs版本1.6.42和打字稿版本2.7.1制作的，为了提供示例，我使用angular 7和打字稿创建了示例，因此请帮助我编辑此打字稿文件..

从应用程序的角度来看，到目前为止，已经有jquery ui datepicker且输入是只读的，没有问题，但是现在要求输入必须可编辑并且需要进行验证检查，因此出现了此问题。 / p>

真正的问题是，如果我开始在输入框中编辑日期，则显示为NaN-NaN-NaN，并且如果我开始编辑，则完全不正确。

我的要求是我需要添加用于检查日期的验证，因此我需要获取用于验证的用户输入值，如果我们进行编辑，现在输入NaN-NaN-NaN。

请帮助我摆脱这个问题，并使输入框具有其日期实际上是可编辑的，如果日期无效，则可以相应地进行验证。

Answer 1

如果我理解正确，那么基本上您将希望将视图值与模型值分开，并为它们分别设置计算阶段。这样，即使模型为空或无效，您也可以控制屏幕上显示的内容，并且用户可以不受干扰地编辑输入。

在不依赖AngularJs ngModel验证或其他验证的vanila形式中，您可以拥有两个变量。 dateModel和dateView。

示例：

<input ng-model="$ctrl.date">
<span ng-if="!$ctrl.isDateValid">Some error text</span>

class MyComponent {
  dateView: string;
  dateModel: Date;
  isDateValid = false;

  set date(value) {
     this.dateView = value;
     this.dateModel = calcDateModel(value);
     this.isDateValid = calcValidity(this.dateModel);
  }
  get date() {
    return this.dateView;
  }
}

如何编辑输入日期？

1 个答案: